Получение логического значения из объекта в массиве с последующим присвоением ему свойства DOM

#javascript #jquery #json #for-loop

#javascript #jquery #json #для цикла

Вопрос:

Например:

 {
  "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, и наоборот.

Как я могу это сделать?

1. Возможно, с помощью if инструкции?

2. » поместить фрукт в DOM » куда?

3. Я пробовал это как снаружи, так и внутри for цикла, и у меня это не работает.

4. @Taplar в переменной item рядом с именем.

Ответ №1:

Есть много способов сделать это, но в основном это суть:

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

Ответ №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)
}

Ответ №3:

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

Вы можете использовать троичный код для добавления необязательного текста, если значение равно true.

Ответ №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>