Keeping getting the push ERROR - Kevin Powell

Sste · 2023-04-05T12:44:35.526Z

I keep getting this ERROR in the console everytime I call this function as you can see in the image. Why is this happening and how can I solve it? my intention with code was to create a new list of array everytime I change the const data and not to substitute the before alteration with a new one like the code is doing

1

13eck•4/5/23, 12:46 PM

That’s because you’re trying to use

.push()

.push()

.push()

.push() on an object.

.push()

.push()

.push()

.push() is an array method, no an object method.

S

SsteOP•4/5/23, 12:47 PM

I must to convert using the Object.keys ? I try to use this method but it didn't work

1

13eck•4/5/23, 12:48 PM

Also, for the future, please provide actual code and not screenshots. You can’t copy/paste from a screenshot

S

SsteOP•4/5/23, 12:49 PM

Sorry, I will send the code

SSste I must to convert using the Object.keys ? I try to use this method but it didn't...

1

13eck•4/5/23, 12:49 PM

Assuming

dbTask

dbTask

dbTask

dbTask follows the same setup as

data

data

you need to get the correct task type first, then push the new team to the correct array

S

SsteOP•4/5/23, 12:50 PM

Can you show me,pls?

1

13eck•4/5/23, 12:50 PM

dbTask.toDo.push(task)

dbTask.toDo.push(task)

dbTask.toDo.push(task)

dbTask.toDo.push(task) will add the new task to the to-do array list

S

SsteOP•4/5/23, 12:51 PM

const data = {
    toDo: [{tarefa: "learn"}],
    doing: [{tarefa: "netflix"}],
    done: [{tarefa: "watch"}]
}; 


// CREATE
const createTask = (task) =>{
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));;
    dbTask.push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

const data = {
    toDo: [{tarefa: "learn"}],
    doing: [{tarefa: "netflix"}],
    done: [{tarefa: "watch"}]
}; 


// CREATE
const createTask = (task) =>{
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));;
    dbTask.push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

const data = {
    toDo: [{tarefa: "learn"}],
    doing: [{tarefa: "netflix"}],
    done: [{tarefa: "watch"}]
}; 


// CREATE
const createTask = (task) =>{
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));;
    dbTask.push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

const data = {
    toDo: [{tarefa: "learn"}],
    doing: [{tarefa: "netflix"}],
    done: [{tarefa: "watch"}]
}; 


// CREATE
const createTask = (task) =>{
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));;
    dbTask.push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

113eck `dbTask.toDo.push(task)` will add the new task to the to-do array list

S

SsteOP•4/5/23, 12:52 PM

If I want to take all the three (Todo, doing and done) together?

1

13eck•4/5/23, 12:53 PM

What I would change:

const createTask = (task, category) => {
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));
    dbTask[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

// adds a new task to the `toDo` category
createTask("Learn to juggle", "toDo");

// adds to `doing`
createTask("Fix my bike", "doing");

const createTask = (task, category) => {
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));
    dbTask[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

// adds a new task to the `toDo` category
createTask("Learn to juggle", "toDo");

// adds to `doing`
createTask("Fix my bike", "doing");

const createTask = (task, category) => {
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));
    dbTask[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

// adds a new task to the `toDo` category
createTask("Learn to juggle", "toDo");

// adds to `doing`
createTask("Fix my bike", "doing");

const createTask = (task, category) => {
    const dbTask = JSON.parse(localStorage.getItem('dbTask'));
    dbTask[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(dbTask));
}

// adds a new task to the `toDo` category
createTask("Learn to juggle", "toDo");

// adds to `doing`
createTask("Fix my bike", "doing");

1

13eck•4/5/23, 12:54 PM

The

category

category

category

category parameter is added to dynamically choose which array to add to. I used bracket notation to select the key in the object to access

1

13eck•4/5/23, 12:55 PM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#accessing_properties

S

SsteOP•4/5/23, 12:56 PM

If I want to modify in the data?

S

SsteOP•4/5/23, 12:56 PM

Like add task in the data variable

1

13eck•4/5/23, 12:57 PM

If you want to use the

data

data

variable then you should access that instead of local storage

S

SsteOP•4/5/23, 12:57 PM

It still get an error

1

13eck•4/5/23, 12:58 PM

The error might be because you're trying to access something that doesn't exist. The first thing you do is grab the

dbTask

dbTask

dbTask

dbTask string from local storage, but if you didn't put anything there then it's not an object with arrays, it's an empty string

S

SsteOP•4/5/23, 1:00 PM

When I console log the dbTask, it shows that it is a null value

S

SsteOP•4/5/23, 1:00 PM

It may be because of this

1

13eck•4/5/23, 1:01 PM

My suggestions is to use the

data

data

variable you declared for all reads and only write to local storage

S

SsteOP•4/5/23, 1:02 PM

Can you show me again? I only understand properly when I see an example

1

13eck•4/5/23, 1:04 PM

// this is called an immediately invoked function expression (IIFE)
// it runs the function and stores the returned value in `data`
const data = (() => {
          // it tries to read `dbTask` from local storage
          // the `??`  will return the first item if it exists
          // but if it doesn't then the second item will be returned
  return JSON.parse(localStorage.getItem('dbTask')) ??
   {toDo: [], doing: [], done: []}
})();

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

// this is called an immediately invoked function expression (IIFE)
// it runs the function and stores the returned value in `data`
const data = (() => {
          // it tries to read `dbTask` from local storage
          // the `??`  will return the first item if it exists
          // but if it doesn't then the second item will be returned
  return JSON.parse(localStorage.getItem('dbTask')) ??
   {toDo: [], doing: [], done: []}
})();

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

// this is called an immediately invoked function expression (IIFE)
// it runs the function and stores the returned value in `data`
const data = (() => {
          // it tries to read `dbTask` from local storage
          // the `??`  will return the first item if it exists
          // but if it doesn't then the second item will be returned
  return JSON.parse(localStorage.getItem('dbTask')) ??
   {toDo: [], doing: [], done: []}
})();

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

// this is called an immediately invoked function expression (IIFE)
// it runs the function and stores the returned value in `data`
const data = (() => {
          // it tries to read `dbTask` from local storage
          // the `??`  will return the first item if it exists
          // but if it doesn't then the second item will be returned
  return JSON.parse(localStorage.getItem('dbTask')) ??
   {toDo: [], doing: [], done: []}
})();

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

1

13eck•4/5/23, 1:04 PM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

1

13eck•4/5/23, 1:05 PM

These are more advanced techniques, though. Not something you learn in JS 101

S

SsteOP•4/5/23, 1:06 PM

Thanks so much!!

1

13eck•4/5/23, 1:06 PM

Like I said in the other thread, to do lists are not the simple app most people think :p

S

SsteOP•4/5/23, 1:06 PM

Yeah, but I put in my head that I will make it anyway

S

SsteOP•4/5/23, 1:06 PM

In this way, I can learn more

1

13eck•4/5/23, 1:06 PM

It's a great learning experience, for sure

1

13eck•4/5/23, 1:11 PM

Another option that doesn't use an IIFE:

// Object.assign() combines two or more objects into one object.
// Later objects overwrite earlier objects, so your defaults are first
// then you replace them with what comes from local storage, if anything
const data = Object.assign({toDo: [], doing: [], done: []}, JSON.parse(localStorage.getItem("dbTask")));

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

// Object.assign() combines two or more objects into one object.
// Later objects overwrite earlier objects, so your defaults are first
// then you replace them with what comes from local storage, if anything
const data = Object.assign({toDo: [], doing: [], done: []}, JSON.parse(localStorage.getItem("dbTask")));

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

// Object.assign() combines two or more objects into one object.
// Later objects overwrite earlier objects, so your defaults are first
// then you replace them with what comes from local storage, if anything
const data = Object.assign({toDo: [], doing: [], done: []}, JSON.parse(localStorage.getItem("dbTask")));

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

// Object.assign() combines two or more objects into one object.
// Later objects overwrite earlier objects, so your defaults are first
// then you replace them with what comes from local storage, if anything
const data = Object.assign({toDo: [], doing: [], done: []}, JSON.parse(localStorage.getItem("dbTask")));

const createTask = (task, category) => {
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

1

13eck•4/5/23, 1:11 PM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

1

13eck•4/5/23, 1:11 PM

I think this second way is beter

S

SsteOP•4/5/23, 1:18 PM

Yeah, it's better

1

13eck•4/5/23, 1:19 PM

In JavaScript there are at least three different ways to do the same thing

S

SsteOP•4/5/23, 1:19 PM

How long did it takes to you to learn all this things?

113eck In JavaScript there are *at least* three different ways to do the same thing 🤣

S

SsteOP•4/5/23, 1:19 PM

That's the fun part

1

13eck•4/5/23, 1:19 PM

I've been learning JS since 2018. So I'm going on 5 years

1

13eck•4/5/23, 1:20 PM

Be sure to subscribe to https://gomakethings.com/articles/

Daily Developer Tips

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.
If you're human, leave this blank Enter your email address to get Daily Developer Tips emails Get Daily Developer Tips

Last Chance! A new session of the Vanilla JS Academy sta...

1

13eck•4/5/23, 1:20 PM

Chris is an amazing teacher of all things vanilla JS!

1

13eck•4/5/23, 1:21 PM

Also, if you haven't see it, https://javascript.info is the best online resource for learning JS

The Modern JavaScript Tutorial

1

13eck•4/5/23, 1:22 PM

MDN is a great resource if you know what you're looking for. MDN is more for reference, "how does Array.map() work again?" than it is for learning IMO

S

SsteOP•4/5/23, 1:23 PM

Thanks

1

13eck•4/5/23, 1:23 PM

But MDN does have a "Learn JS" section if you want to have a look
https://developer.mozilla.org/en-US/docs/Learn/JavaScript

113eck Another option that doesn't use an IIFE: ```js // Object.assign() combines two o...

S

SsteOP•4/5/23, 1:24 PM

it continues to show that ERROR message

S

SsteOP•4/5/23, 1:24 PM

I don't know what is happening

1

13eck•4/5/23, 1:25 PM

What's your code look like?

S

SsteOP•4/5/23, 1:27 PM

My whole code?

1

13eck•4/5/23, 1:27 PM

The code that's not working

S

SsteOP•4/5/23, 1:27 PM

I will send you. Just a second

S

SsteOP•4/5/23, 1:30 PM

const data = Object.assign({
    toDo: ["tarefa: learn"],
    doing: ["tarefa: netflix"],
    done: ["tarefa: watch"]
}); 
console.log(data)

const dbTask = JSON.parse(localStorage.getItem('dbTask'));

// CREATE
const createTask = (task, category) =>{
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

const data = Object.assign({
    toDo: ["tarefa: learn"],
    doing: ["tarefa: netflix"],
    done: ["tarefa: watch"]
}); 
console.log(data)

const dbTask = JSON.parse(localStorage.getItem('dbTask'));

// CREATE
const createTask = (task, category) =>{
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

const data = Object.assign({
    toDo: ["tarefa: learn"],
    doing: ["tarefa: netflix"],
    done: ["tarefa: watch"]
}); 
console.log(data)

const dbTask = JSON.parse(localStorage.getItem('dbTask'));

// CREATE
const createTask = (task, category) =>{
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}

const data = Object.assign({
    toDo: ["tarefa: learn"],
    doing: ["tarefa: netflix"],
    done: ["tarefa: watch"]
}); 
console.log(data)

const dbTask = JSON.parse(localStorage.getItem('dbTask'));

// CREATE
const createTask = (task, category) =>{
    data[category].push(task);
    localStorage.setItem('dbTask', JSON.stringify(data));
}