Angular.js with JSON not working?

Question

I wonder if you could help me out. I've been trying to get JSON to work with Angular.js but I've been having a rough time with the specifics of a JSON $http.get() call. I would like to simply just have each person's name show up under the 'people' heading on the webpage but my JSON call doesn't want to work. I know it's probably a stupid small syntax error but I can't seem to find it. All help appreciated. Here is my code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app='People'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>People Webpage</title>
</head>

<body>
<h3>People</h3>
<div ng-controller='PeopleController as peeps'>
<div ng-repeat='person in peeps.people'>
<h5>{{person.name}}</h5>
</div>
</div>
</body>
</html>

JSON:

{
{ 'name' : 'Jack', 'age' : '28', 'weight' : '75kg'},
{ 'name' : 'Jill', 'age' : '25', 'weight' : '66kg'}
}

JAVASCRIPT:

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

app.controller('PeopleController',[ '$http' ,function($http){

    var names = this;

    names.people = [];

    $http.get('people.json').success(function(data){

        names.people = data;


    });

}]);

I tried alert(data); in the success callback and I'm receiving the JSON as this:

"{{ 'name' : 'Jack', 'age' : '28', 'weight' : '75kg'},{ 'name' : 'Jill', 'age' : '25', 'weight' : '66kg'}}"

However, if try to call an alert on a JavaScript object created like so:

 var people = [
{ 'name' : 'Jack', 'age' : '28', 'weight' : '75kg'},
{ 'name' : 'Jill', 'age' : '25', 'weight' : '66kg'}
];

alert(people);

I receive something to the effect of :

{{ object : Object,  object : Object,  object : Object},
{ object : Object, object : Object, object : Object}}

Is this relevant to my issue?

Is that JSON accurate? Looks like the outer curly braces are probably supposed to be square brackets (array)... — Justin Bell
– Justin Bell, Commented Oct 7, 2014 at 19:33
Agreed you need the JSON to output an array for person in peeps.people to work — Thierry Blais
– Thierry Blais, Commented Oct 7, 2014 at 19:36
Yes use [] instead of {} for the first set of braces. Do you have any control over how the JSON is outputted? — Thierry Blais
– Thierry Blais, Commented Oct 7, 2014 at 19:44

Christopher Robot · Accepted Answer · 2014-10-07 19:56:23Z

2

How your JSON should be:

{
"people": [
    {
        "name": "Jack",
        "age": "28",
        "weight": "75kg"
    },
    {
        "name": "Jill",
        "age": "25",
        "weight": "66kg"
    }
]
}

How your call should be:

$http.get('people.json').success(function(data){

    names.people = data.people;


});

The method you're using with $http.get for the success is something I don't typically do, so you're either looking at data.people or data.data.people depending on the response you received from the call.

console.dir(data)

Would give you a good look at the response being received.

answered Oct 7, 2014 at 19:56

Christopher Robot

3111 silver badge9 bronze badges

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

3 Comments

Christopher Robot Over a year ago

Tried what but never worked? You need to be more descriptive of what you're seeing/error receiving/ etc.

Delrog Over a year ago

I got this response in the console: GET (hostingaddress) net::ERR_BLOCKED_BY_CLIENT weburl/:21

Delrog Over a year ago

Thank you, you were technically the best answer as you wrote it in with double quotes " ". Sorry for doubting you. I tested it your answer with single quotes.

Thierry Blais · Accepted Answer · 2014-10-07 19:46:44Z

1

Ok was hoping someone else would write this but:

Use this as your JSON

[
    { 'name' : 'Jack', 'age' : '28', 'weight' : '75kg'},
    { 'name' : 'Jill', 'age' : '25', 'weight' : '66kg'}
]

answered Oct 7, 2014 at 19:46

Thierry Blais

2,85825 silver badges41 bronze badges

5 Comments

Christopher Robot Over a year ago

I was about to. First thing I noticed was the invalid JSON -- for future use: jsonlint.com

Thierry Blais Over a year ago

Well if he doesn't have control over how the JSON is outputted he has a different problem althogether.

Christopher Robot Over a year ago

Yep, just saw that too.

Delrog Over a year ago

Thanks for the advice but it still doesn't work and if I call an alert(data) on the JSON it fails to even give me a response so I assume the $http never succeeds with the [ ] braces. Any other ideas?

Rohan Chandane Over a year ago

Its always good practice to validate JSON object before using it in application or finalising it for any API. 1. jsonlint.com 2. jsonapi.org

Delrog · Accepted Answer · 2014-10-08 04:35:23Z

0

After playing around with my JSON I realized what the error was, thank you everyone for the help.

[
    {
        "name": "Jack",
        "age": "28",
        "weight": "75kg"
    },
    {
        "name": "Jill",
        "age": "25",
        "weight": "66kg"
    }
]

The issue was that I first of all used { } as an outer encapsulation instead of [ ] , thank you to everyone who suggested that. Moreover, JSON requires double quotes " " as opposed to single quotes ' '. Thank you especially to Likwid_T for chatting with me and attempting to help, I really appreciate it.

answered Oct 8, 2014 at 4:35

Delrog

7652 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular.js with JSON not working?

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related