无法使用 Angular js 在 li 标签中显示 json 数组答案

【问题标题】：Not able to display json array in li tag using angular js无法使用 Angular js 在 li 标签中显示 json 数组
【发布时间】：2015-05-21 18:57:04
【问题描述】：

我想从 json 响应中提取几个参数，但不知何故我无法填充它。我正在使用 angular js 和第三方 api。这是我的 API 结果。我只想在整个数组中显示 "[{"severity":{"label":"Severe"},"label":"Skin Rash"}]" 。我需要在列表视图中填充 html。

“过敏有一个或多个反应。每个反应都有一个严重性。标签 Severe 是 Severity 对象中的一个键。标签 Skin Rash 在反应对象中。过敏对象有它自己的标签字段。”

{"reactions":[{"severity":{"label":"Severe"},"label":"Skin Rash"}],"audit":{"source":"medicare","createDate ":"2015-03-02T18:39:23Z","updateDate":"2015-03-02T18:39:23Z","version":"1"},"label":"其他 - 碘","结束”：“2007-10-28T00:00:00-04:00”，“开始”：“1993-01-01T00:00:00-05:00”，“日期”：“2015-03-02T18： 37:42Z"}

【问题讨论】：

我想知道您到现在为止都尝试过什么，以及您在生成的代码的哪一部分遇到了问题。

标签： arrays json angularjs html api

【解决方案1】：

使用 ng-repeat：

不确定您在寻找什么，但这里有一个示例：

编辑

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

app.controller("MyCtrl", function($scope){

var obj = {"reactions":[{
"severity":{"label":"Severe"},
"label":"Skin Rash"}],
"audit":{"source":"medicare","createDate":"2015-03-02T18:39:23Z",
"updateDate":"2015-03-02T18:39:23Z","version":"1"},
"label":"Other - IODINE","ended":"2007-10-28T00:00:00-04:00",
"started":"1993-01-01T00:00:00-05:00",
"date":"2015-03-02T18:37:42Z"}

  $scope.reactions = obj.reactions;

});

在你的 index.html 中；您可以执行以下操作

<body ng-controller="MyCtrl">
    <table class="table table-bordered">
      <thead>
        <th>Severity label</th>
        <th>Just Label</th>
      </thead>
      <tbody>
        <tr ng-repeat="item in reactions">
          <td>{{item.severity.label}}</td>
          <td>{{item.label}}</td>
        </tr>
      </tbody>
    </table>
  </body>

这里是 Plunk：http://plnkr.co/edit/sgJ9RvtUYl6DkUDXPCc6?p=preview

【讨论】：

感谢您的回复。我尝试了您在此处提到的语法。我能够显示对象但不能显示实际值。 “[{“严重程度”：{“标签”：“严重”}，“标签”：“皮疹”}]”。如何显示实际值。比如“皮疹”
检查在反应数组中插入“标签”是否有效。
如果我使用反应[0].severity 那么它只显示“严重”，但我想显示“皮疹”。关闭电话但没有得到它。
item.reactions[0].severity.label

【解决方案2】：

这应该可行！

HTML

<div ng-controller="ctrl">
    <div ng-repeat="item in data.reactions">
        {{item.label}}
    </div>
</div>

JAVASCRIPT

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

myApp.controller('ctrl', function ($scope) {
$scope.data = {
    "reactions":[
        {
            "severity":
            {
                "label":"Severe"
            },
            "label":"Skin Rash"
        }
    ],
    "audit":
    {
        "source":"medicare",
        "createDate":"2015-03-02T18:39:23Z",
        "updateDate":"2015-03-02T18:39:23Z",
        "version":"1"
    },
    "label":"Other - IODINE",
    "ended":"2007-10-28T00:00:00-04:00",
    "started":"1993-01-01T00:00:00-05:00",
    "date":"2015-03-02T18:37:42Z"
};
});

【讨论】：

【解决方案3】：

你可以试试：

<ul ng-repeat="item in data.reactions">
  {{item.label}}
</ul>

【讨论】：

它尝试了，但它没有！起初它只是重复'ul'而不是'li'......此外，他想包含“严重性”的标签......最后但并非最不重要的一点是，如果问题的答案以“尝试”开头你可以打赌它应该是一个评论......