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>

获取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);
        }
    }

所以基本上，我如何才能有3个div，而不是每个div都显示"date"，"title"或"text"来进行样式设置，而不是每个3个div都显示样式项目在哪里？

我尝试做3个函数来分离div，"date"和"title"，但是它只显示最后一个数组项。例如“文本”信息。我是JavaScript新手。

Answer 1

将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即可。

这是工作中的pen

Answer 2

然后每个数组元素只做3个div。您正在制作一个。

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 3

使用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>

如何使用JavaScript分隔数组以进行样式设置

3 个答案: