Question

例如：

{
  "data": [
    {
      "name": "grape",
      "fruit": false
    },
    {
      "name": "orange",
      "fruit": true
    }
  ]
}

我正在遍历数组并将其放在DOM上：

for (var i=0; i < data.length; i++) {
    var item = '<li>'+data[i].name+'</li>';
    $('#list').append(item)
}

我想做的是将fruit值设置为true的数组中的每个对象，将is a fruit放入DOM，反之亦然。

我该怎么做？

Answer 1

data.forEach(function(element){
    var item = '<li>'+ element.name + (element.fruit ? ' is a fruit' : '') +'</li>';
    $('#list').append(item);
})

如果值为true，则可以使用三进制添加可选文本。

Answer 2

for (var i=0; i < data.length; i++) {
    var fruitBool = data.fruit ? " is a fruit" : " is not a fruit";
    var item = '<li>' + data[i].name + fruitBool + '</li>';
    $('#list').append(item)
}

Answer 3

有很多方法可以做到这一点，但是基本上这是要点：

// Initializing the data
const data = {
  data: [{
      "name": "grape",
      "fruit": false
    },
    {
      "name": "orange",
      "fruit": true
    }
  ]
}


// Getting the ul element
const ul = document.getElementById("list")


// Looping through the data array
data.data.forEach((item) => {

  // creating the listItem and assigning the text node
  const listItem = document.createElement('li')
  item.fruit ?
    listItem.appendChild(document.createTextNode("The fruit " + item.name + " is a fruit")) :
    listItem.appendChild(document.createTextNode("The fruit " + item.name + " is not a fruit"));


  ul.appendChild(listItem)
})

<div>
  <h1>
    Fruit checker
  </h1>
  <ul id="list"></ul>
</div>

Answer 4

您可以使用模板文字。其次，要访问data，您需要首先访问该对象。

let obj = {
  "data": [{
      "name": "grape",
      "fruit": false
    },
    {
      "name": "orange",
      "fruit": true
    }
  ]
}

let str = '';
let dt = obj.data;
for (var i = 0; i < dt.length; i++) {
  str += `<li>${dt[i].name}</li>`
}
document.getElementById('list').innerHTML = str

<ul id='list'></ul>

从数组中的对象获取布尔值，然后为其分配DOM属性

4 个答案: