Kevin Powell - Community•2y 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•2y ago

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

SsteOP•2y ago

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

13eck•2y ago

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

SsteOP•2y ago

Sorry, I will send the code

13eck•2y 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

SsteOP•2y ago

Can you show me,pls?

13eck•2y ago

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

SsteOP•2y 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•2y 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

SsteOP•2y ago

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

13eck•2y ago

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

SsteOP•2y ago

It still get an error 😔

13eck•2y 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

SsteOP•2y ago

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

13eck•2y ago

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

SsteOP•2y ago

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

13eck•2y 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

SsteOP•2y ago

Thanks so much!!

13eck•2y ago

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

SsteOP•2y ago

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

13eck•2y 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

SsteOP•2y ago

Yeah, it's better 🙂

13eck•2y ago

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

SsteOP•2y ago

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

13eck•2y ago

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

13eck•2y 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•2y ago

Chris is an amazing teacher of all things vanilla JS!

13eck•2y ago

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

The Modern JavaScript Tutorial

13eck•2y 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

SsteOP•2y ago

Thanks

13eck•2y 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

SsteOP•2y ago

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

13eck•2y ago

What's your code look like?

SsteOP•2y ago

My whole code?

13eck•2y ago

The code that's not working

SsteOP•2y 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•2y ago

And what error are you getting?

SsteOP•2y ago

Cannot read properties of undefined (reading "push")

13eck•2y ago

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

SsteOP•2y ago

I am creating in the data

13eck•2y 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");

SsteOP•2y ago

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

13eck•2y 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(...)

SsteOP•2y ago

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

13eck•2y 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