Joseph U.
Joseph U.

Reputation: 4607

How to read/repeat JSON data from AngularJS

I am pretty new to AngularJS so my apologies in that there are probably several concepts I am missing.

I'd like to take the following multi-level JSON string and parse/repeat the LastName elements.

Here is my attempt to do so with 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": "[email protected]",
    "FirstName": "Rose",
    "Id": "003o000000BTRXuAAP",
    "LastName": "Gonzalez"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXvAAP"
    },
    "Email": "[email protected]",
    "FirstName": "Sean",
    "Id": "003o000000BTRXvAAP",
    "LastName": "Forbes"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXwAAP"
    },
    "Email": "[email protected]",
    "FirstName": "Jack",
    "Id": "003o000000BTRXwAAP",
    "LastName": "Rogers"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXxAAP"
    },
    "Email": "[email protected]",
    "FirstName": "Pat",
    "Id": "003o000000BTRXxAAP",
    "LastName": "Stumuller"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXyAAP"
    },
    "Email": "[email protected]",
    "FirstName": "Andy",
    "Id": "003o000000BTRXyAAP",
    "LastName": "Young"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXzAAP"
    },
    "Email": "[email protected]",
    "FirstName": "Tim",
    "Id": "003o000000BTRXzAAP",
    "LastName": "Barr"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY0AAP"
    },
    "Email": "[email protected]",
    "FirstName": "John",
    "Id": "003o000000BTRY0AAP",
    "LastName": "Bond"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY1AAP"
    },
    "Email": "[email protected]",
    "FirstName": "Stella",
    "Id": "003o000000BTRY1AAP",
    "LastName": "Pavlova"
}, {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY2AAP"
    },
    "Email": "[email protected]",
    "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"
}]';

Result: # of Records 1937

Shows the number of characters (I think) instead of the number of records returned and the unordered list is not displaying.

Upvotes: 0

Views: 597

Answers (1)

JB Nizet
JB Nizet

Reputation: 691785

Look at the code:

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

So, output is a variable of type string. It's not an array. If you want an array, it should be

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

But then, the code would still be wrong:

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

output is an array. It doesn't have any attributess field. So it should be

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

Upvotes: 3

Related Questions