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 Feed，然后使用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输出，因此只有在您打开浏览器控制台时才能看到数据：

enter image description here

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

3 个答案: