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

Question

For example:

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

I am looping through the array and putting them on the DOM with this:

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

What I want to do is for every object in the array with the fruit value set to true , put is a fruit in the DOM, and vice versa.

How can I do this?

Answer 1

There are many ways of doing this but basically this is the gist of it:

 // 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 2

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

You can use a ternary to add the optional text if the value is true.

Answer 3

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 4

You can use template literals. Secondly to access data you need to first access the object.

 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>