Consume REST API in AngularJS Example

Question

I have a small application in which i have a 3rd party url which is heavily loaded with JSON data and using those JSON data i want to build a page using AngularJS. Can anybody help me out how to work with it. As i am very new AngularJS. I need a simple working demo.

The complex JSON is like below:

"_embedded":{
      "session":[
         {
            "createdDate":"2017-03-10T14:51:44.000+0000",
            "updatedDate":"2017-03-10T14:51:44.000+0000",
            "deletedDate":null,
            "title":"xxx xxx cccc",
            "track":"cccc cccccc cccc",
            "speaker":"Speaker: ddddddddd",
            "sessionAbstract":"loremipsum loremipsum loremipsum loremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsum",
            "sessionDate":null,
            "_links":{
               "self":{
                  "href":"http://www.someurl.com/adcbf"
               },
               "session":{
                  "href":"http://www.someurl.com/adcbffdfdsf/57457"
               }
            }
         },
         {
            "createdDate":"2017-03-10T14:51:44.000+0000",
            "updatedDate":"2017-03-10T14:51:44.000+0000",
            "deletedDate":null,
            "title":"xxx xxx cccc",
            "track":"cccc cccccc cccc",
            "speaker":"Speaker: ddddddddd",
            "sessionAbstract":"loremipsum loremipsum loremipsum loremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsum",
            "sessionDate":null,
            "_links":{
               "self":{
                  "href":"http://www.someurl.com/adcbf"
               },
               "session":{
                  "href":"http://www.someurl.com/adcbffdfdsf/57457"
               }
            }
         }
         ]
         }

From the complex json object, i need to get only "title", "track", "speaker"

I tired this below code:

angular.module('myApp', []).controller('MyController', function ($scope, $http) {
    $scope.findValue = function () {

$scope.complexJSON = [{"_embedded":{
      "session":[
         {
            "createdDate":"2017-03-10T14:51:44.000+0000",
            "updatedDate":"2017-03-10T14:51:44.000+0000",
            "deletedDate":null,
            "title":"xxx xxx cccc",
            "track":"cccc cccccc cccc",
            "speaker":"Speaker: ddddddddd",
            "sessionAbstract":"m",
            "sessionDate":null,
            "_links":{
               "self":{
                  "href":"http://www.someurl.com/adcbf"
               },
               "session":{
                  "href":"http://www.someurl.com/adcbffdfdsf/57457"
               }
            }
         }       ]
         }

<div ng-app="myApp">
<div class="row">
        <fieldset class="scheduler-border col-lg-6" ng-controller="MyController">
<input type="text" class="form-control" placeholder="Session Search" ng-model="getSession.title" />
<input type="text" class="form-control" placeholder="Tracks" ng-model="getSession.track" />

<button type="button" ng-disabled="!getSession" ng-click="findValue()">Search</button>

<p data-ng-bind="getSumAssured"></p>
            <ul>
                <li ng-repeat="pa in complexJSON | filter:getSession">
                    <p>Age: <b data-ng-bind="pa.title"></b>

                    </p>
                </li>
            </ul>

Hi Jatin, thanks for the response. But your json is a not that much complex, as i need to consume the complex data like. I have modified my post. Please have a look at it. — youeye, Mar 21 '17 at 11:41
The concept remains same for any amount of data. Try it and let me know where you face the issue. You can post your code which you have tried so far. — Jatin patil, Mar 21 '17 at 11:46
Hi Jatin, I modified the original post. Please have a look at it. — youeye, Mar 21 '17 at 12:02
If i call like this function Hello($scope, $http) { $http.get('http://52.43.36.180:8080/session?size=1000'). success(function(data) { $scope.json = data; }); } then i am getting some console errors. — youeye, Mar 21 '17 at 13:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138653/discussion-between-phphunger-and-jatin-patil). — youeye, Mar 21 '17 at 15:34

score 0 · Answer 1 · answered Mar 21 '17 at 13:28

0

Are you looking for something like this ?

<ul>
    <li ng-repeat="pa in complexJSON._embedded.session | filter:getSession">
      <p>Title: <b data-ng-bind="pa.title"></b> </p>
      <p>Track: <b data-ng-bind="pa.track"></b></p>
      <p>Speaker: <b data-ng-bind="pa.speaker"></b></p>
    </li>
</ul>

Please elaborate your question so that we can provide more specific solution

answered Mar 21 '17 at 13:28

Sachet Gupta

822
5
18

Yes similar to something like this. But i am not able to get the data from the REST API service it throws me an exception as **bold**XMLHttpRequest cannot load http://52.43.36.180:8080/session?size=1000. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:81' is therefore not allowed access.**bold** – youeye Mar 21 '17 at 13:51
Then your 1st problem is accessing the API resource. Data fetching and displaying is a secondary problem. Refer http://stackoverflow.com/questions/21455045/angularjs-http-cors-and-http-authentication for first part of your problem – Sachet Gupta Mar 21 '17 at 15:40

Consume REST API in AngularJS Example

1 Answers1