带有 JSON 的 Angular.js 不起作用？答案

【问题标题】：Angular.js with JSON not working?带有 JSON 的 Angular.js 不起作用？
【发布时间】：2014-10-08 12:35:23
【问题描述】：

不知道你能不能帮帮我。我一直在尝试让 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}}

这与我的问题有关吗？

【问题讨论】：

那个 JSON 准确吗？看起来外部大括号可能应该是方括号（数组）...
同意您需要 JSON 来为 peeps.people 中的人员输出一个数组才能工作
如何让 JSON 输出一个数组？
在 JSON 中使用 [] 括号而不是 {} ?
是的，第一组大括号使用 [] 而不是 {}。您是否可以控制 JSON 的输出方式？

标签： javascript html json angularjs getjson

【解决方案1】：

你的 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)

会让您仔细查看收到的回复。

【讨论】：

试过什么但没用？您需要更详细地描述您所看到的/错误接收/等。
我在控制台收到了这个响应：GET (hostingaddress) net::ERR_BLOCKED_BY_CLIENT weburl/:21
谢谢，从技术上讲，你是最好的答案，因为你用双引号“”写了它。很抱歉怀疑你。我用单引号测试了你的答案。

【解决方案2】：

好吧希望其他人会写这个但是：

将其用作您的 JSON

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

【讨论】：

我正要这样做。我注意到的第一件事是无效的 JSON——供将来使用：jsonlint.com
好吧，如果他无法控制 JSON 的输出方式，那么他总有一个不同的问题。
是的，我也看到了。
感谢您的建议，但它仍然不起作用，如果我在 JSON 上调用警报（数据），它甚至都没有给我响应，所以我假设 $http 永远不会成功 [ ] 大括号。还有其他想法吗？
在应用程序中使用 JSON 对象或为任何 API 最终确定之前验证 JSON 对象始终是一种很好的做法。 1.jsonlint.com 2.jsonapi.org

【解决方案3】：

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

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

问题是我首先使用 { } 作为外部封装而不是 [ ] ，感谢所有建议的人。此外，JSON 需要双引号 " " 而不是单引号 ' '。特别感谢 Likwid_T 与我聊天并提供帮助，我真的很感激。

【讨论】：