从 Json 响应 javascript 创建 flex-box 列答案

【问题标题】：Create flex-box columns from Json response javascript从 Json 响应 javascript 创建 flex-box 列
【发布时间】：2019-09-14 18:57:24
【问题描述】：

根据 json 响应创建一组列，例如：foreach(var item in json )then {create div + item.id + item.icon+div}。注意：不能使用以 (thick ``) 开头的模板，因为这会导致 IE11 出错。不知道为什么。

我试过了：

为列表中的每一项创建一列，其中包含文本

let container+=
 +  '<div class=" ">'
 + ' <p class=" child ">text from json </p> '

用这些值显示每一列

 document.querySelector('.flex-container').innerHTML = container;

实际结果我在这里尝试了一个类似的例子【问题】：Dynamic Div with different paragraphs in Javascript Only。但不幸的是，那里的答案对我不起作用。我希望输出看起来像这样 https://www.w3schools.com/csS/tryit.asp?filename=trycss3_flexbox，所以我不想在每列中显示 1、2,3，而是想在段落中显示上面的文本。例如：如果 Json 是 30 个项目，那么我将显示 30 列及其各自的样式。

【问题讨论】：

Create a set of columns 在您的问题中显示您的 CSS，因为这是您问题的关键
你还应该发布任何 HTML '.flex-container'

标签： javascript css json flexbox multiple-columns

【解决方案1】：

你没有说你是如何从 JSON 中获取文本的，所以我将把它留给你并假设一个文本数组，所以这里是如何将它附加到一个元素（在那里也做了一个假设，因为你的问题较少比完成。

function appendNewThing(jsonTxt) {
  let container = document.createElement("div");
  container.className = "child-holder";
  let newP = document.createElement("p");
  newP.className = "child";
  let newContent = document.createTextNode(jsonTxt);
  newP.appendChild(newContent);
  container.appendChild(newP);
  document.getElementsByClassName("flex-container")[0].appendChild(container);
}

let textFromJSON = ["J Text 1", "My 2", "Text 3", "Last 4"];
textFromJSON.forEach(appendNewThing)

.flex-container {
  display: flex;
  background-color: #73A3FF;
}

.flex-container>.child-holder {
  background-color: #D3f4FF;
  margin: 0.25em;
  padding: 0.25em;
}

.child-holder {
  border: 1px solid #5577FF;
}

.child {
  color: #0000FF;
  font-size: 1.5em;
}

<div class="flex-container">
</div>

【讨论】：