jQuery将数组推到数组项子项不起作用 [英] Jquery pushing array to array item child not working

问题描述

我正在制作一个用于跟踪目标的应用程序；这些目标组成的习惯.

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.

我可以声明一系列主要目标&获取保存的目标后，在html中显示名称"元素.

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

或者像这样:

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

HTML将不再显示，并且数组保持不变-没有子对象添加到主要目标中.

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

我如何显示HTML(只要不推送孩子，它就可以正常工作):

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 ?

我正在使用Materialize for CSS& Cordova/phonegap可以对其进行测试，如果有帮助的话.

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

推荐答案

您正在遍历数组本身，但是children也是也是数组

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

以上内容使用 .map 将children数组转换为li的列表.

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

还要这样做:

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

将children重新定义为简单字符串(欢迎使用Javascript，您可以在运行时更改类型！).您可能打算在那里做的是:

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

请注意添加了[& ]将children保留为具有1个元素的数组.

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>

这篇关于jQuery将数组推到数组项子项不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！