如何将 JSON foreach 转换为 HTML ul li [重复]答案

【问题标题】：How to foreach JSON to HTML ul li [duplicate]如何将 JSON foreach 转换为 HTML ul li [重复]
【发布时间】：2019-05-28 11:25:02
【问题描述】：

我有一个像下面这样的 JSON

{
    "gists": [
        {
            "name": "Get the title",
            "id": "beaf8a106e76f4bb82a85ca3a7707a78",
            "category": "Function"
        },
        {
            "name": "Get the content",
            "id": "c6ae7c55aa27f8b6dbeb15f5d72762ec",
            "category": "Uncategorized"
        }
    ]
}

我想通过 JavaScript 获取 HTML。如下：

<ul>
    <li>Name: Get The title, ID: beaf8a106e76f4bb82a85ca3a7707a78, Function: Function</li>
    <li>Name: Get The content, ID: c6ae7c55aa27f8b6dbeb15f5d72762ec, Function: Uncategorized</li>
</ul>

我试过这种方式：http://jsfiddle.net/ehsansajjad465/SLHTA/10/

但是，我不确定如何在一行中获取值，我想使用纯 JS 来完成。我的 JSON 也将形成外部链接。 http://rasel.tech/gist.json

这可能是一个非常愚蠢的问题。对不起:(

【问题讨论】：

你能把你试过的贴在这里吗？
你在使用任何库，例如 jQuery，还是只是普通的 javascript？
将您尝试过的内容放入问题中，而不仅仅是链接。链接可能会失效，人们不应该去异地来帮助你。您可以使用堆栈片段（[<>] 工具栏按钮）。 Here's how to do one.
Turn a JSON array of arrays into <ul> and <li> elements 和 Use JQuery to convert JSON array to HTML bulleted list 的可能重复
“愚蠢”的问题很好，不完整或重复的问题不是。

标签： javascript

【解决方案1】：

使用 vanilla JS，您可以使用 forEach 方法循环遍历数组并相应地构造 li 元素。

var data = {
    "gists": [
        {
            "name": "Get the title",
            "id": "beaf8a106e76f4bb82a85ca3a7707a78",
            "category": "Function"
        },
        {
            "name": "Get the content",
            "id": "c6ae7c55aa27f8b6dbeb15f5d72762ec",
            "category": "Uncategorized"
        }
    ]
};

var container = document.querySelector('#container');
var ul = document.createElement('ul');

data.gists.forEach(function (item) {
  var li = document.createElement('li');

  li.textContent = 'Name: ' + item.name + ', ID: ' + item.id + ', Function: ' + item.category;
  ul.appendChild(li);
});

container.appendChild(ul);

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

【讨论】：

【解决方案2】：

如果您想在一行中获取项目，您可以使用 css 来完成。

您可以在ul 中添加white-space:nowrap;，在li 中添加display: inline。我只是在编辑你添加的小提琴。

var data = {
    "qA": [{
        "question": "How deep is the ocean",
            "answer": [
            "quite deep",
            "very deep",
            "no deep at all"]
    }, {
        "question": "How high is the sky",
            "answer": [
            "real high",
            "high enough",
            "not that high"]
    }]
};

var html = "";
$.each(data.qA, function (index, item) {
    //console.log(item);
    html += "<ul>" + item.question;

    $.each(item.answer, function (index1, item1) {
        html += " <li> ("+index1+ ") " + item1 + "</li>";

    });
    html += "</ul>";
});
$("#container").append(html);

ul{
  white-space:nowrap;
}
ul li{
  display: inline
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container"></div>

【讨论】：

【解决方案3】：

您可以使用JSON.stringify 对对象进行字符串化，我使用正则表达式从字符串中删除{}。

let obj = {"gists": [{"name": "Get the title","id": "beaf8a106e76f4bb82a85ca3a7707a78","category": "Function"},{ "name": "Get the content","id": "c6ae7c55aa27f8b6dbeb15f5d72762ec","category": "Uncategorized"}]}

let li = document.getElementById('list');
obj.gists.forEach( e => {
  let ele = document.createElement('li')
  ele.innerHTML = `${JSON.stringify(e).replace(/[{}]/g,'')}`
  li.appendChild(ele);
})

<ul id='list'>
</ul>

【讨论】：