Angular.js与JSON无法正常工作?

时间:2014-10-07 19:31:34

标签: javascript html json angularjs getjson

我想知道你是否可以帮助我。我一直试图让JSON与Angular.js一起工作,但是我在JSON $ http.get()调用的细节上花了很多时间。我想只是让每个人的名字出现在“人物”下面。在网页上标题,但我的JSON调用并不想工作。我知道它可能是一个愚蠢的小语法错误,但我似乎无法找到它。所有帮助赞赏。这是我的代码:

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;


    });

}]);

我试过警报(数据);在成功回调中,我收到了JSON:

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

但是,如果尝试在如此创建的JavaScript对象上调用警报:

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

alert(people);

我收到了以下内容:

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

这与我的问题有关吗?

3 个答案:

答案 0 :(得分:2)

你的JSON应该如何:

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

您的电话应该如何:

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

    names.people = data.people;


});

你使用$ http.get获得成功的方法是我通常不会做的事情,所以你要么看看data.people还是data.data.people,这取决于你从调用

console.dir(data) 

会让你好好看看收到的回复。

答案 1 :(得分:1)

好的是希望其他人写这个但是:

将此作为您的JSON

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

答案 2 :(得分:0)

在玩了我的JSON后,我意识到错误是什么,谢谢大家的帮助。

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

问题在于我首先使用{}作为外部封装而不是[],感谢所有建议的人。此外,JSON需要双引号&#34; &#34;而不是单引号&#39; &#39 ;.特别感谢Likwid_T与我聊天并尝试提供帮助,我真的很感激。