javascript - 访问 Json 对象

标签 javascript html angularjs json

{"Kind": {
"Food": {
    "color": "0",
    "size": "31",
    "shape": "round"
},
"Drink": {
    "color": "0",
    "size": "34",
    "shape": "square"
},
"Condiments": {
    "color": "0",
    "size": "52",
    "shape": "rectangle"
}

您好,我有一个 JSON 格式的文件,我正在尝试将其放入表格中,其中只会显示种类,例如食物和涉及圆形的形状。

你们知道我如何提取它吗?

之前我获取数据比较容易,因为JSON的格式

 var obj = [
{
    "Kind": "Food",
    "shape": "round"
}, {
    "Kind": "Drink",
    "shape": "square"
}, {
    "Kind": "Condiments",
    "shape": "rectangle"
}]

调用它很简单

<td>{{obj.Kind}}</td><td>{obj.shape}}</td>

现在我不太确定如何使用新的 json 格式来做到这一点..

最佳答案

根据我对您问题的理解,以下是您问题的答案。

你的html代码是这样的

<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr>
            <th>Type</th> <th>Shape</th>
        </tr>
        <tr ng-repeat="(key ,value) in list.Kind">
            <td>{{key}}</td><td>{{value.shape}}</td>
       </tr>

    </table>

</div>

之后你的JavaScript就像这样

var myApp = angular.module("myApp", []);

    myApp.controller("myController", function($scope){

         $scope.list ={"Kind": {
    "Food": {
        "color": "0",
        "size": "31",
        "shape": "round"
    },
    "Drink": {
        "color": "0",
        "size": "34",
        "shape": "square"
    },
    "Condiments": {
        "color": "0",
        "size": "52",
        "shape": "rectangle"
    }
         }
                      };

    });

最后的输出是

类型 形状

调味品长方形

饮料方

食物轮

关于javascript - 访问 Json 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28104389/

相关文章:

html - 行内 block 元素放置

javascript - 上传前的 AngularJS 图像预览显示所选的上一张图像

javascript - angularjs函数的调用顺序是什么(config/run/controller)?

javascript - 单击按钮时收到未定义的消息

javascript - 如何用jsp变量传递onclick并直接到其他页面

javascript - Grails 根据 select 中的更改呈现部分模板

javascript - Bootstrap Multiselect 和 $.ajax GET 以及嵌套对象

html - CSS3 不在 HTML 元素上显示背景图像 + 渐变

javascript - React - 将计算样式传递给 div 的语法

javascript - Internet Explorer 中的 HTMLDivElement 对象上未定义“append”