Как отделить массив с помощью JavaScript для стилизации

Question

В данный момент я включил весь массив в один элемент div, однако я все еще хотел бы отображать массив, но отдельно, чтобы можно было индивидуально стилизовать "date" "title" и "text".

Моя папка JSON:

[
{
    "date": "Example Date",
    "title": "Example Title",
    "text": "Example Text" 
},
{
    "date": "Example Date",
    "title": "Example Title",
    "text": "Example Text"
},
{
    "date": ""Example Date",
    "title": "Example Title",
    "text": "Example Text"
}
]

Мой HTML:

<div id="myData"></div>

Fetch API:

        fetch('example.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        var mainContainer = document.getElementById("myData");
        for (var i = 0; i < data.length; i++) {
            var div = document.createElement("div");
            div.innerHTML = data[i].date + data[i].title + data[i].text;
            mainContainer.appendChild(div);
        }
    }

В общем, как я могу иметь 3div вместо одного с каждым отдельным div, показывающим "date", "title" или "text" для стиля вместо одного div со всеми 3 элементами в?

Я пытался сделать 3 функции для разделения "date", "title" и "text", однако он показывает только последний элемент массива.например «текстовая» информация.Я новичок в JavaScript.

Answer 1

Тогда просто сделайте 3 деления на элемент массива.Вы делаете один.

fetch('example.json')
  .then(response => response.json())
  .then(appendData)
  .catch(console.error)

function appendData(data) {
  const mainContainer = document.getElementById("myData");
  for (const {date, title, text} of data) {
    const div = document.createElement("div")
    div.append(
      textDiv(date, 'date'),
      textDiv(title, 'title'),
      textDiv(text, 'class')
    )
    mainContainer.append(div)
  }
}

function textDiv(text, cls) {
  const div = document.createElement("div")
  div.textContent = text
  if (cls) div.className = cls
  return div
}

Answer 2

Используйте for-in для перебора свойств вашего внутреннего объекта.Таким образом, вам не нужно заранее знать, какие ключи объекта ожидать.

fetch("https://api.myjson.com/bins/r9hhx")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    appendData(data);
  })
  .catch(function(err) {
    console.log("error: " + err);
  });

function appendData(data) {
  var mainContainer = document.getElementById("myData");

  for (var i = 0; i < data.length; i++) {
    const item = data[i];
    var outerDiv = document.createElement("div");
    outerDiv.className = `item outer`;

    for (var key in item) {
      var innerDiv = document.createElement("div");
      innerDiv.innerHTML = item[key];
      innerDiv.className = `item inner ${key}`;
      outerDiv.appendChild(innerDiv);
    }
    mainContainer.appendChild(outerDiv);
  }
}

body {
  font-family: sans-serif;
}

.item {
  padding: 10px;
  border: 1px solid #ccc;
}

.date {
  background: rgba(0, 121, 0, 0.1);
}

.title {
  background: rgba(255, 0, 0, 0.1);
}

.text {
  background: rgba(0, 0, 255, 0.1);
}

<div id="myData"></div>

Answer 3

Замените строку innerHTML на

div.innerHTML = '<span class="date">' + data[i].date + '</span>' + 
                '<span class="title">' + data[i].title + '</span>' +
                '<span class="text">' + data[i].text + '</span>' ;

И написание css для этих дат, заголовков, текстовых классов сделает эту работу.

Вот рабочая ручка