Jquery pushing array to array item child not working

Question

I am making an app to track goals & the habits that those goals consist of.

I am however having trouble pushing the habits array to a specific goal.

I can declare the array of main goals & show the 'name' elements in html after getting the saved goals.

var _priValues  = [{
        name: "test1",
        children:[]
    }];

let storedValues = localStorage.getItem("_priValues", JSON.stringify(_priValues));

However, once I try to push a value to the children of the goal, as such:

_priValues[0].children.push("Work out every day");

Or like this:

_priValues.push({
            [id] : {
                name : "maingoal",
                children : "subgoal"
            }
        });

The HTML will not show anymore and the array remains the same - no children are added to the main goal.

How I show the HTML (which is working fine as long as I dont push children):

for (var i = 0; i < _priValues.length; i++) { 
  var item = `
    <h6>${_priValues[i].name}</h6>     
    <ul class="collectionDetails">                                        
      <li> ${_priValues[i].children} </li>                                  
    </ul>`; 
  $('.priorityList ul.collection').append(item); 
};

Anyone have any idea as to why it's not working ?

I'm using Materialize for CSS & Cordova/phonegap to test it out, if that helps.

Maybe I'm missing something but I don't see where you're sending the changes to HTML. — Cfreak
– Cfreak, Commented Jul 22, 2020 at 15:45

Jamiec · Accepted Answer · 2020-07-22 16:47:02Z

0

You're looping over the array itself, but children is also an array

for (var i = 0; i < _priValues.length; i++) { 
  var item = `
    <h6>${_priValues[i].name}</h6>     
    <ul class="collectionDetails">                                        
      ${_priValues[i].children.map(child => "<li>" + child + "</li>"}                           
    </ul>`; 
  $('.priorityList ul.collection').append(item); 
};

The above uses .map to turn the children array to a list of li.

Also that doing this:

_priValues.push({
        [id] : {
            name : "maingoal",
            children : "subgoal"
        }
    });

redefines children as a simple string (Welcome to Javascript, where you can change types at runtime!). What you probably meant to do there is:

_priValues.push({
        [id] : {
            name : "maingoal",
            children : ["subgoal"]
        }
    });

Note the addition of [ & ] keeping children as an array with 1 element.

Here is an example of your code working as (I think) you expect:

var _priValues = [{
  name:"Foo",
  children:["bar"]
}];


function redraw(){
  $('.priorityList').empty();
  for (var i = 0; i < _priValues.length; i++) { 
    var item = `
      <h6>${_priValues[i].name}</h6>     
      <ul class="collectionDetails">                                        
        ${_priValues[i].children.map(child => "<li>" + child + "</li>")} 
      </ul>`; 
    $('.priorityList').append(item); 
  };
}
redraw();

$('.addItem').on("click",() => {
   _priValues.push({
      name:"new-item", children:["item1"]
   });
   redraw();
})

$('.addChild').on("click",() => {
   _priValues[0].children.push("new-item");
   redraw();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="priorityList">
  
</div>

<button class="addItem">Add new top level item</button>
<button class="addChild">Add a new child to the first item</button>

edited Jul 22, 2020 at 16:47

answered Jul 22, 2020 at 16:15

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lvb Over a year ago

Thank you! This will no doubt be useful, but the main issue right now is still that I cannot push to the children array, so even if I could show it on HTML - it would show nothing as there are no child values

Jamiec Over a year ago

@lvb as ive said before - minimal reproducible example which is not what you have above.

Jamiec Over a year ago

@lvb I've added a minimal reproducible example of my own, perhaps you could use that as a starting point to show what your code is doing differently

Collectives™ on Stack Overflow

Jquery pushing array to array item child not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related