Как добавить шаблон HTML, используя jquery

Question

У меня есть вызов ajax, который возвращает мне двумерный массив как таковой:

[
    {
    "sweetness": "medium",
    "calories": 2359,
    "bitterness": 52
    },

    {
    "sweetness": "low",
    "calories": 4520,
    "bitterness": 34
    },

    {
    "sweetness": "extreme",
    "calories": 3414,
    "bitterness": 12
    }

]

Мой начальный HTML шаблон выглядит следующим образом:

<div id="results"></div>

Я хочу конечные данные HTML выглядят так:

<div id="results">
    <div class="fruit-item">
        <div id="f-calories">medium</div>
        <div id="f-sweetness">2359</div>
        <div id="f- bitterness">52</div>
    </div>
    <div class="fruit-item">
        <div id="f-calories">low</div>
        <div id="f-sweetness">4520</div>
        <div id="f- bitterness">34</div>
    </div>
    <div class="fruit-item">
        <div id="f-calories">extreme</div>
        <div id="f-sweetness">3414</div>
        <div id="f- bitterness">12</div>
    </div>
</div>

Я пробовал с al oop вот так, но это не работает:

data.forEach( function( key, value) {
    $(".fruit-item").append("<div id='f-sweetness' > "+key.sweetness+"</div>" );
    $(".fruit-item").append("<div id='f-calories' > "+key.calories+"</div>" );
    $(".fruit-item").append("<div id='f-bitterness' > "+key.bitterness+"</div>" );
}); 

Answer 1

Прежде всего ваш HTML не прав. Идентификатор - это идентификатор, который означает, что он должен быть уникальным. Вместо этого используйте класс.

Вторым моментом является добавление этих элементов к любому элементу. Скорее всего, вы хотите добавить его в конец списка, поэтому вы должны использовать $('#results').append('').

Хорошее решение с ES6 будет выглядеть так (похоже на простой JavaScript):

$.each(data, function( key, object) {
    $('#results').append(`
        <div class="fruit-item">
            <div class="f-calories">${object.sweetness}</div>
            <div class="f-sweetness">${object.calories}</div>
            <div class="f-bitterness">${object.bitterness}</div>
        </div>`);
 });

В качестве альтернативы вы можете использовать простую библиотеку, такую ​​как Handlebars (https://handlebarsjs.com/). Таким образом, вы можете добавить полностью скомпилированные шаблоны HTML.

Answer 2

Итак, в HTML. у вас не должно быть дубликатов идентификаторов ... плюс, вы должны посмотреть определение функции, с которой хотите работать, если вы новичок в javascript, например, forEach обратный вызов не имеет value и key а точнее currentValue и index, как указано в документации

простой способ написать то, что вам нужно, это

<script>
   var data = [{
        "sweetness": "medium",
        "calories": 2359,
        "bitterness": 52
      }, {
        "sweetness": "low",
        "calories": 4520,
        "bitterness": 34
      }, {
        "sweetness": "extreme",
        "calories": 3414,
        "bitterness": 12
      }];

  $(() => {
      data.forEach((item, idx) => {
          $("#results").append(`
            <div class="fruit-item" data-item="${idx}">
                <div class="f-calories">${item.sweetness}</div>
                <div class="f-sweetness">${item.calories}</div>
                <div class="f-bitterness">${item.bitterness}</div>
            </div>
          `);
      })
  });
</script>

<div id="results"></div>

Answer 3

Вы можете использовать литералы шаблона в методе append :

data.forEach(i => {
  $("#results").append(`
    <div class="fruit-item">
      <div id="f-calories">${i.calories}</div>
      <div id="f-sweetness">${i.sweetness}</div>
      <div id="f- bitterness">${i.bitterness}</div>
    </div>
  `)
})

Answer 4

Оберните данные в $ (), чтобы они стали jQuery объектом, тогда вы можете использовать его метод forEach.

$(data).forEach( function( key, value) {
    $(".fruit-item").append("<div id='f-sweetness' > "+key.sweetness+"</div>" );
    $(".fruit-item").append("<div id='f-calories' > "+key.calories+"</div>" );
    $(".fruit-item").append("<div id='f-bitterness' > "+key.bitterness+"</div>" );
});