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

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 变量。

<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输出，所以只有打开浏览器控制台才能看到数据：

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

How to show JSON as formatted view in html

javascript

html

json

date

viewer