如何在 html 中将 JSON 显示为格式化视图

Question

我需要在我的 html 页面中查看 JSON 作为格式化视图。 JSON 来自数据库。我需要在格式化视图中显示它。

就像

 {
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}] 
}

有人有什么想法或建议吗？或任何可能有帮助的资源。

已编辑：我想创建一个 JSON 解析器。用户输入不同的json，可以在格式化视图中查看。

Answer 1

试试 JSON.stringify(data)，它是一个 Javascript 函数。希望对您有所帮助。

参考：Detail Explaination

如果您使用的是 PHP，请使用 json_encode

参考：json_encode manual

Answer 2

由于您使用的是 angular-js，您可以简单地从控制器加载您的 JSON 提要，然后使用 ng-repeat 函数将项目迭代到您的视图中页。下面是您的 HTML 视图的外观示例，您可能需要根据需要设置样式和构建块：

<span>items:</span>
<span>[</span>
<br/>  
<div class="item" ng-repeat="item in items">
    <span>{</span><br/>
    <span class="field">year : {{item.year}}</span><br/>
    <span class="field">boat : {{item.boat}}</span><br/>
    <span class="field">position : {{item.position}}</span><br/>
    <span>}</span>
</div>

您可以在此JSFiddle 中找到工作示例。

Answer 3

首先：您的远程 JSON 无效：它缺少 crews 的结束括号。

应该是这样的：

{
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}] // Missing this bracket
}

你没有提到你的 JSON 是否是远程的。我假设不是，所以我将在此示例代码中使用带有 eval 函数的本地 JavaScript var。

<script type="text/javascript">

var content = {
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}]
};

var json = eval(content);

for (c in json.crews) {
    var crew = json.crews[c];
    for (i in crew.items) {
        var item = crew.items[i];
        console.log(item.year);
        console.log(item.boat);
        console.log(item.position);
        console.log(item.name);
    }
}

</script>

我用console.log输出，所以你只有打开浏览器控制台才能看到数据：