CODEWITHSUNDEEP
jsonangularjs
qqruza
qqruza

Reputation: 1417

AngularJS getting in trouble with my JSON

I have got a JSON object from my website:

{ "ID":"102”,
 "role":{“subscriber”:true},
 "first_name”:”Test 3”,
 "last_name”:”Test 4”,
 "custom_fields":{ “job_title”:”testing”},
}

and AngularJS to manage the dynamic content but it doesn't seem to be working:

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

 function PeopleCtrl($scope, $http) {

$scope.people = [];

$scope.loadPeople = function () {
    var httpRequest = $http({
        method: 'POST',
        url: '/echo/json/',
        data: mockDataForThisTest

    }).success(function (data, status) {
        $scope.people = data;
    });

};
}

Here is a JSFiddle.

Can anybody help me with displaying data?

Upvotes: 0

Views: 66

Answers (3)

Robo Rick
Robo Rick

Reputation: 789

You had a comma at the end of the last property, that will typically error everything out, the below JSON should work:

{ "ID":"102”,
 "role":{“subscriber”:true},
 "first_name”:”Test 3”,
 "last_name”:”Test 4”,
 "custom_fields":{ “job_title”:”testing”}
}

Upvotes: 0

chris
chris

Reputation: 1817

@qqruza to get the callback working properly in your jsfiddle.net/1zuteco7, change the url to this: 

http://test.eventident.com/api/last_posts/siteid=&callpage=1&perpage=10&callback=JSON_CALLBACK

Notice the JSON_CALLBACK in the end. The rest of your app will still not work though cause you are not picking the right bindings from the returned data in your repeat directive. Try console.log(data) in the success function to click through the returned object and get to the right paths.

Upvotes: 1

Donal
Donal

Reputation: 32713

There were a number of issues with your JSON, I have resolved them.

It had different types of quotes in there. I have replaced them with ".

It now looks like this:

[{         
  "ID": "100",
  "role": {            
    "subscriber": true         
  },
  "first_name": "Test",
  "last_name": "Test2",
  "custom_fields": {            
    "job_title": "subscriber"         
  },
}, {   
  "ID": "102",
  "role": {            
    "subscriber": true         
  },
  "first_name": "Test 3",
  "last_name": "Test 4",
  "custom_fields": {            
    "job_title": "testing"         
  },        
}]

Also, you were not referencing the model fields correctly in your view.

Here is the updated working fiddle: http://jsfiddle.net/kmmmv83y/1/

Upvotes: 1

Related Questions