How to put Value from JSON API to Angular Template Directive

Question

iam newbie and i want to ask.

i want to get some value from JSON API (title, course_id, etc), and put the Value to my Template with Directive. so at Index, i can repeat my tempalate with data from the API.

How to get Value from that JSON ?

This my Code :

my API

{
"count": 1,
"next": null,
"previous": null,
"results": [
    {
        "url": "http://192.168.1.37:8000/api/courses/a/",
        "title": "I Love You",     <-- I want to put this Value to my Template
        "course_id": "1",
        "starting_date": "2016-10-03"
    }
           ]
}

Controller demo.js

demo.controller("demo", function($scope, $http) {
$http.get('http://192.168.1.37:8000/api/courses/'). <-- Data From my API
    then(function(response) {
        $scope.courses = response.data;
    });


    });

demo.directive("demoItemDirective", function() {
   return {
        scope : { demoInfo : "=info"},
        templateUrl : "/app/demo.tmpl"   <-- My Template
    };
   });

My Template demo.tmpl

<p>{{demoInfo.count}}</p>                <-- Works, count Displayed
<p>{{demoInfo.results.title}</p>         <-- Not works, title not displayed

My Index.html

   <div ng-repeat="group in courses | groupCount:2">
   <div ng-repeat="x in group">
        <demo-item-directive info="x"></demo-item-directive>
   </div>
   </div>

RIYAJ KHAN · Accepted Answer · 2016-10-10 07:56:57Z

3

It should be

<p>{{demoInfo.results[0].title}</p>

Your result contain an Array of object.

You need to access with index.

answered Oct 10, 2016 at 7:56

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Comments

Jakub Jankowski · Accepted Answer · 2016-10-10 07:58:48Z

0

According to your post, the result is an array:

"results": [
    {
        "url": "http://192.168.1.37:8000/api/courses/a/",
        "title": "I Love You",     <-- I want to put this Value to my Template
        "course_id": "1",
        "starting_date": "2016-10-03"
    }
]

Thus, you can't refer to the title itself, you have to reference the first element:

{{demoInfo.results[0].title}}

answered Oct 10, 2016 at 7:58

Jakub Jankowski

7312 gold badges9 silver badges20 bronze badges

1 Comment

user6947847 Over a year ago

Thx mate, thats Work !

Collectives™ on Stack Overflow

How to put Value from JSON API to Angular Template Directive

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related