current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
6  
Is that JSON accurate? Looks like the outer curly braces are probably supposed to be square brackets (array)... –  Justin Bell 23 hours ago
    
Agreed you need the JSON to output an array for person in peeps.people to work –  Likwid_T 23 hours ago
    
How would I get the JSON to output an array? –  Delrog 23 hours ago
    
With [] brackets around the JSON as opposed to {} ? –  Delrog 23 hours ago
1  
Yes use [] instead of {} for the first set of braces. Do you have any control over how the JSON is outputted? –  Likwid_T 23 hours ago

3 Answers 3

up vote 1 down vote accepted

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.

share|improve this answer
    
Tried it but never worked. –  Delrog 23 hours ago
    
Tried what but never worked? You need to be more descriptive of what you're seeing/error receiving/ etc. –  Christopher Robot 23 hours ago
    
I got this response in the console: GET (hostingaddress) net::ERR_BLOCKED_BY_CLIENT weburl/:21 –  Delrog 22 hours 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. –  Delrog 14 hours ago
up vote 1 down vote

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'}
]
share|improve this answer
1  
I was about to. First thing I noticed was the invalid JSON -- for future use: jsonlint.com –  Christopher Robot 23 hours ago
    
Well if he doesn't have control over how the JSON is outputted he has a different problem althogether. –  Likwid_T 23 hours ago
    
Yep, just saw that too. –  Christopher Robot 23 hours 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? –  Delrog 23 hours ago
1  
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 –  Rohan Chandane 17 hours ago
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.