Kevin Powell - Community•15mo ago

Keeping getting the push ERROR

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

45 Replies

13eck•15mo ago

That’s because you’re trying to use .push() on an object. .push() is an array method, no an object method.

Sste•15mo ago

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

13eck•15mo ago

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

Sste•15mo ago

Sorry, I will send the code

13eck•15mo ago

Assuming dbTask follows the same setup as data you need to get the correct task type first, then push the new team to the correct array

Sste•15mo ago

Can you show me,pls?

13eck•15mo ago

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

Sste•15mo ago

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));
}

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

13eck•15mo ago

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");

The 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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#accessing_properties

Sste•15mo ago

If I want to modify in the data? Like add task in the data variable

13eck•15mo ago

If you want to use the data variable then you should access that instead of local storage

Sste•15mo ago

It still get an error 😔

13eck•15mo ago

The error might be because you're trying to access something that doesn't exist. The first thing you do is grab the 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

Sste•15mo ago

When I console log the dbTask, it shows that it is a null value It may be because of this

13eck•15mo ago

My suggestions is to use the data variable you declared for all reads and only write to local storage

Sste•15mo ago

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

13eck•15mo ago

// 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));
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing https://developer.mozilla.org/en-US/docs/Glossary/IIFE These are more advanced techniques, though. Not something you learn in JS 101

Sste•15mo ago

Thanks so much!!

13eck•15mo ago

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

Sste•15mo ago

Yeah, but I put in my head that I will make it anyway In this way, I can learn more

13eck•15mo ago

It's a great learning experience, for sure 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));
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign I think this second way is beter

Sste•15mo ago

Yeah, it's better 🙂

13eck•15mo ago

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

Sste•15mo ago

How long did it takes to you to learn all this things? That's the fun part 😅

13eck•15mo ago

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

13eck•15mo ago

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...

13eck•15mo ago

Chris is an amazing teacher of all things vanilla JS!

13eck•15mo ago

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

The Modern JavaScript Tutorial

13eck•15mo ago

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

Sste•15mo ago

Thanks

13eck•15mo ago

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

Sste•15mo ago

it continues to show that ERROR message I don't know what is happening

13eck•15mo ago

What's your code look like?

Sste•15mo ago

My whole code?

13eck•15mo ago

The code that's not working

Sste•15mo ago

I will send you. Just a second

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));
}

13eck•15mo ago

And what error are you getting?

Sste•15mo ago

Cannot read properties of undefined (reading "push")

13eck•15mo ago

How are you creating your task? If you don't add the correct category it'll error out

Sste•15mo ago

I am creating in the data

13eck•15mo ago

Also, you don't need const dbTask = JSON.parse(localStorage.getItem('dbTask'));. You should have that in the const data above:

const data = Object.assign({toDo: [], doing: [], done: []}, JSON.parse(localStorage.getItem("dbTask")));

const data = Object.assign({toDo: [], doing: [], done: []}, JSON.parse(localStorage.getItem("dbTask")));

Otherwise as you have it you're only creating the default object without applying the local storage items to it No, I mean what does the function call look like to create the task? if category doesn't exactly equal toDo, doing, or done then the function will error as nothing else is defined in data (and undefined doesn't have a .push() method) As an example, if you wanted to add "cut the grass" to your doing list:

createTask("cut the grass", "doing");

createTask("cut the grass", "doing");

Sste•15mo ago

I am doing this way In the "doing", I could use data.doing?

13eck•15mo ago

No, you can't if category doesn't exactly equal toDo, doing, or done then the function will error as nothing else is defined in data (and undefined doesn't have a .push() method) In the createTask function data[category] is what is telling the code where to push the task. When you pass "doing" to the function, it becomes data["doing"].push(...)

Sste•15mo ago

I get it Thanks I will give up this project for a while, because it so frustrating

13eck•15mo ago

So createTask("cut the grass", "doing");:

createTask("cut the grass", "doing");
// --> replace `task` with "cut the grass"
data[category].push("cut the grass");
// --> now replace `category` with "doing"
data["doing"].push("cut the grass");

createTask("cut the grass", "doing");
// --> replace `task` with "cut the grass"
data[category].push("cut the grass");
// --> now replace `category` with "doing"
data["doing"].push("cut the grass");

Gaming

Programming

Keeping getting the push ERROR