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

【问题标题】：How to separate an array with JavaScript for styling purposes如何使用 JavaScript 分隔数组以进行样式设置
【发布时间】：2019-10-25 22:37:16
【问题描述】：

目前我已将整个数组包含在单个 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" 用于样式而不是一个div 包含所有 3 个项目？

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

【问题讨论】：

那些不是数组。它们是物体。你做对了。为什么不在innerHTML 语句中添加标记？

标签： javascript html css json fetch-api

【解决方案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

【讨论】：

【解决方案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
}

【讨论】：

【解决方案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);
}

&lt;div id="myData"&gt;&lt;/div&gt;

【讨论】：