ng-repeat Angular and JSON array

Question

I'm new to Angular and I'm trying to set up a simple display. I've looked through the documentation on ng-repeat and have done some of the tutorials with success every time. However, when I went to do a mock of my own I can't get anything to show from the JSON file. Even using the often found Angular "todo.json" example found everywhere I still am unable to figure this one out. I'm not sure if it has to do something with JSON or possibly nesting the ng-repeat. Can anyone guide me to seeing the light?! hehe. Thanks in advance.

So, here's the Plunker link. http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D

HTML:

    <!doctype html>
<html ng-app="App" >
<head>
  <meta charset="utf-8">
  <title>Todos $http</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="Calendar">
  <ul>
    <li ng-repeat="items in events">
      {{items.events}}
    </li>
  </ul>
</body>
</html>

JS:

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

App.controller('Calendar', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.events = res.data;                
        });
});

JSON:

[
    {
        "events": [
            {
                "EventTitle": {
                    "href": "http://example.com/event1",
                    "text": "HEADLINE TEXT FOR EVENT 1"
                },
                "HeadlineImage": {
                    "href": "http://example.com/event1",
                    "src": "http://example.com/Image.jpg",
                    "text": "CAPTION TEXT FOR IMAGE "
                },
                "Eventdescription": "Lorem Loreem Loreeem Ipsum Ipsuum Ipsuuum ..."
            }
        ]
    }
]

Olivier · Accepted Answer · 2014-11-24 22:15:53Z

2

Your data structure is pretty weird. Check an updated working plunker: http://plnkr.co/edit/SXHjqxjZ2bgJSs327jz4?p=preview

You can use <pre>{{ events | json }}</pre> in your view to easily inspect/debug objects.

answered Nov 24, 2014 at 22:15

Olivier

3,4816 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cedric Over a year ago

Hmm.. Is there anyway to work within this particular format since the API is structuring the JSON like this directly from kimono.io?

alou · Accepted Answer · 2014-11-26 23:05:03Z

1

If you must keep this structure, then you need to do something like this

<ul>
  <li ng-repeat="items in events">
    <a href="{{items.EventTitle.href}}">{{items.EventTitle.text}}</></a>
  </li>
</ul>

controller:

App.controller('Calendar', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.events = res.data[0].events;             
        });
});

Here's a forked plunker

Edit: The revised plunker, using the above changes. The scope var should be res.data.events

Updating after a new json structure provided: Here's a working example with actual json data

edited Nov 26, 2014 at 23:05

answered Nov 24, 2014 at 22:28

alou

1,51214 silver badges17 bronze badges

6 Comments

alou Over a year ago

I edited this, the ng-repeat will work with some modification so chack the revised code. Cheers.

Cedric Over a year ago

Thanks this has worked. Now that I have the JSON working locally, I'm wondering, and forgive me for being so new at this, but how would I interpret this to link to the EXTERNAL JSON file? I've tried to just put the link in the $Http GET line, but it's not working is there a simple solution to link what is currently the LOCAL json to an EXTERNAL json? I've been scouring StackOverflow for something like this, but all I'm getting is $ajax. Is that the correct way to link an external JSON file in Angular?

alou Over a year ago

It should work if the get requist is producing exactly this json format, what's the url you are using? Also, have in mind, this functionality should be in a service and then inject the service to the controller.

Cedric Over a year ago

I'm trying to get my head around this... Here's the plunker. I have also pasted the contents of that JSON file into the todo.json file there.

alou Over a year ago

The plunker is blocking it because of CORS, try it locally and console.log(res) to see what you are getting and eventually log res.data, res.data[0] to get familiar with how to get what you're looking for.

|

Collectives™ on Stack Overflow

ng-repeat Angular and JSON array

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related