如何从 AngularJS 读取/重复 JSON 数据答案

【问题标题】：How to read/repeat JSON data from AngularJS如何从 AngularJS 读取/重复 JSON 数据
【发布时间】：2014-10-19 16:27:31
【问题描述】：

我对 AngularJS 很陌生，所以我很抱歉我可能遗漏了几个概念。

我想采用以下多级 JSON 字符串并解析/重复 LastName 元素。

这是我使用 HTML / Javascript 进行的尝试。

HTML

<!doctype html>
<html ng-app="nameApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="jsonGrab">
      <hr>
      <h1># of Records {{output}}</h1>
      <ul>
        <li data-ng-repeat="attribute in output.attributess">      {{attributes.LastName}}</li>
      </ul>
    </div>    
  </body>
</html>

Javascript

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

nameApp.controller('jsonGrab', function ($scope) {
  // Comment
  $scope.output = '[{
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXuAAP"
    },
    "Email": "rose@edge.com",
    "FirstName": "Rose",
    "Id": "003o000000BTRXuAAP",
    "LastName": "Gonzalez"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXvAAP"
    },
    "Email": "sean@edge.com",
    "FirstName": "Sean",
    "Id": "003o000000BTRXvAAP",
    "LastName": "Forbes"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXwAAP"
    },
    "Email": "jrogers@burlington.com",
    "FirstName": "Jack",
    "Id": "003o000000BTRXwAAP",
    "LastName": "Rogers"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXxAAP"
    },
    "Email": "pat@pyramid.net",
    "FirstName": "Pat",
    "Id": "003o000000BTRXxAAP",
    "LastName": "Stumuller"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXyAAP"
    },
    "Email": "a_young@dickenson.com",
    "FirstName": "Andy",
    "Id": "003o000000BTRXyAAP",
    "LastName": "Young"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXzAAP"
    },
    "Email": "barr_tim@grandhotels.com",
    "FirstName": "Tim",
    "Id": "003o000000BTRXzAAP",
    "LastName": "Barr"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY0AAP"
    },
    "Email": "bond_john@grandhotels.com",
    "FirstName": "John",
    "Id": "003o000000BTRY0AAP",
    "LastName": "Bond"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY1AAP"
    },
    "Email": "spavlova@uog.com",
    "FirstName": "Stella",
    "Id": "003o000000BTRY1AAP",
    "LastName": "Pavlova"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY2AAP"
    },
    "Email": "lboyle@uog.com",
    "FirstName": "Lauren",
    "Id": "003o000000BTRY2AAP",
    "LastName": "Boyle"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY3AAP"
    },
    "Email": "b.levy@expressl&t.net",
    "FirstName": "Babara",
    "Id": "003o000000BTRY3AAP",
    "LastName": "Levy"
}]';

结果：记录数 1937

显示字符数（我认为）而不是返回的记录数，并且未显示无序列表。

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

看代码：

$scope.output = '[{ ... }]';

所以，输出是一个字符串类型的变量。它不是一个数组。如果你想要一个数组，它应该是

$scope.output = [{ ... }];

但是，代码仍然是错误的：

<li data-ng-repeat="attribute in output.attributess">      
    {{attributes.LastName}}
</li>

输出是一个数组。它没有任何 attributess 字段。所以应该是

<li data-ng-repeat="element in output">      
    {{ element.attributes.LastName }}
</li>

【讨论】：

+1 我仍然想知道 1937 是从哪里来的。除非OP在原始代码中做了{{output.length}}，但不是在这里。
这对我来说也没有意义。当我看到它时我会相信它:-)
谢谢 JB 尼泽特！正如您提到的，我首先将字符串转换为数组，然后我的 1937（可能是 1937 个字符的数组）变成了一个包含 10 个元素的数组。然后我就能够使用与您的 {{element.LastName}} 非常相似的代码并且它工作了！
要查看 1937 年的长度，这里有一个 JSBIN url：jsbin.com/wifosixana/1/edit?html,js,output
jsbin里的代码和你发的不一样。你这里贴的代码包含{{output}}，jsbin中的代码包含{{output.length}}。