Question

我正在本地测试AngularJS网站。我在使用本地JSON文件中的$http.get解析JSON数据时遇到问题。

当我在控制器中定义JSON时，我没有任何问题。但是，当我从文件（data.json）获取JSON时，根据JavaScript控制台，JSON格式是不同的。

为什么JSON格式有所不同？具体来说，$http.get检索到的JSON具有数字键。我可以简单地删除数字键吗？或者我的JSON声明/语法有问题吗？以下是一系列其他信息。

以下是我在控制器中定义它的方法：

$scope.customerReviews = [

        {
            'id': '0',
            'title': 'Outstanding Employee!',
            'text': 'bar foo bar foo',
            'image': '<img class="img-responsive img-hover" src="images/bob.jpg">',
            'href': '',
            'date': 'June 17, 2014',
            'author': 'john',
            'articleType': 'article',
            'neverSettle': 'partnering',
            'category': 'customerReviews'
        },
        {
            'id': '1',
            'title': 'hooray!',
            'text': 'congratulations',
            'image': '<img class="img-responsive img-hover" src="images/bob.png">',
            'href': '',
            'date': 'June 17, 2014',
            'author': 'sir charles',
            'articleType': 'article',
            'neverSettle': 'innovating',
            'category': 'customerReviews'
        },
        {
            'id': '2',
            'title': 'Outstanding Employee',
            'text': 'bar foo foo',
            'image': '<img class="img-responsive img-hover" src="images/bilbo.jpg">',
            'href': '',
            'date': 'June 17, 2014',
            'author': 'johnny',
            'articleType': 'article',
            'neverSettle': 'engaging',
            'category': 'customerReviews'
        },
        {
            'id': '3',
            'title': 'Thank you',
            'text': 'much thanks',
            'image': '<img class="img-responsive img-hover" src="images/x.jpg">',
            'href': '',
            'date': 'June 17, 2014',
            'author': 'The Graduate College',
            'articleType': 'article',
            'neverSettle': 'innovating',
            'category': 'customerReviews'
        }
  ];

当我将粘贴从[复制到];到Chrome开发者工具控制台时，我得到以下输出：

better picture of controller-declared JSON console output

就像我上面所说，我当前的代码完美地打印了我的内容。但是如果我尝试使用$http.get在外部文件中获取JSON，则它不会打印我的内容，并且JavaScript控制台会显示不同的JSON格式。

这是我的$http.get代码（在控制器中）：

  // http get json content
  $scope.customerReviews = [];
  $http.get("js/models/data.json").success(function(data){
      console.log("success!");
      $scope.customerReviews = data;
      console.log($scope.customerReviews);
      return $scope.customerReviews;
  });

这是data.json。如您所见，此JSON文件与我定义控制器的方式不同。具体而言，"和'将切换为符合JSON验证。我通过JSON验证器运行了这个，并且格式正确。此外，当我将其粘贴到控制台时，我得到了第一个控制台输出。只有当我$http.get时，我才会得到“数字键”而我的打印功能不起作用。

[
    {
        "id ": "0 ",
        "title ": "Outstanding Employee! ",
        "text ": "too lazy to obfuscate all of my content",
        "image ": "<img class='img-responsive img-hover' src='images/GladisTolsa.jpg'> ",
        "href ": " ",
        "date ": "June 17, 2014 ",
        "author ": "Martha Castleberry ",
        "articleType ": "article ",
        "neverSettle ": "partnering ",
        "category ": "customerReviews "
    },
    {
        "id ": "1 ",
        "title ": "Facilities Help ",
        "text ": "too lazy to obfuscate all of my content",
        "image ": "<img class='img-responsive img-hover' src='images/FernandoLopez.png'> ",
        "href ": " ",
        "date ": "June 17, 2014 ",
        "author ": "Lucy Valenzuela ",
        "articleType ": "article ",
        "neverSettle ": "innovating ",
        "category ": "customerReviews "
    },
    {
        "id ": "2 ",
        "title ": "Outstanding Employee ",
        "text ": "too lazy to obfuscate all of my content",
        "image ": "<img class='img-responsive img-hover' src='images/MariaAlvarado.jpg'> ",
        "href ": " ",
        "date ": "June 17, 2014 ",
        "author ": "Martha Castleberry ",
        "articleType ": "article ",
        "neverSettle ": "engaging ",
        "category ": "customerReviews "
    },
    {
        "id ": "3 ",
        "title ": "Thank you ",
        "text ": "too lazy to obfuscate all of my content",
        "image ": "<img class='img-responsive img-hover' src='images/MovingServices.jpg'> ",
        "href ": " ",
        "date ": "June 17, 2014 ",
        "author ": "The Graduate College ",
        "articleType ": "article ",
        "neverSettle ": "innovating ",
        "category ": "customerReviews "
    }

因此$http.get请求有效。这是控制台输出：

呼。我为我的问题的冗长而道歉。

我的问题：看似等效的JSON如何输出不同的格式？具体来说，为什么$http.get检索到的JSON（第二个）有数字键？我需要第二个控制台输出与第一个控制台输出具有相同的输出。我可以删除数字键吗？或者我的JSON声明/语法有问题吗？

任何输入都表示赞赏。特别是任何可以提高我的AngularJS技能和JSON知识的东西。提前致谢。

编辑：感谢大家到目前为止。显然这些是由Chrome开发人员工具编写的数组索引，而不是数字键。我不会改变我的帖子标题以避免混淆他人。根据要求，这是我的印刷工作方式：

   <!-- ng repeat of Blog Preview Rows (reversed) -->
   <div ng-repeat="x in getCategory().slice().reverse() | limitTo:quantity " close="getCategory().splice(index, 1)">
        <previews></previews>
        <hr />
    </div>

getCategory()是一个使用正则表达式获取URL的查询字符串的函数。如前所述，这在控制器中声明JSON时有效。可能getCategory()在 $http.get后运行，因此不打印任何内容？另请注意，我只是反转ng-repeat。

这是<preview>指令：

.directive('previews', function () { return { restrict: 'AEC', replace: 'true', templateUrl: 'js/views/articleCollection.htm' }; });

articleCollection.htm：

<div class="row"> <div class="col-md-1 text-center"> <p><span ng-bind-html="x.articleType"></span></p> <p><span ng-bind-html="x.neverSettle"></span></p> <p><span ng-bind-html="x.date"></span></p> </div> <div class="col-md-5"> <a href="{{ x.href }}"> <span ng-bind-html="x.image"></span> </a> </div> <div class="col-md-6"> <h3> <a href="{{ x.href }}"><span ng-bind-html="x.title"></span></a> </h3> <p> by <span ng-bind-html="x.author"></span> </p> <p><span ng-bind-html="x.text"></span></p> <a class="btn btn-default" href="{{ x.href }}">Read More <i class="fa fa-angle-right"></i></a> </div> </div>

再次感谢。让我知道如何进一步澄清我的问题。另请告诉我如何改进与AngularJS相关的任何内容。到目前为止，旅程一直很糟糕。

Answer 1

问：看似等效的JSON如何输出不同的格式？

答：因为它们无论哪种方式都有效。查看JSON语法here

的更多信息

问：具体来说，为什么$ http.get检索到的JSON（第二个）有数字键？

答：我猜你在谈论每个对象数组的数组位置索引。它们使阵列更容易识别。当然，为了在控制台中查看目的。

问：我需要第二个控制台输出与第一个控制台输出具有相同的输出。我可以删除数字键吗？

答：与上述相同。谷歌Chrome输出'数字键'只适合像我们这样的开发人员轻松识别对象数组的位置。您不需要在.json文件中。

问：或者我的JSON声明/语法有问题吗？

答：不。根据您提供的示例，您做得很好。保持良好的工作！

修改

我做了一些研究，啊，啊，我现在看到你的问题了。

显然在本地读取JSON导致问题，所以你需要稍微修改一下。

见：

AngularJS: factory $http.get JSON file

编辑2

让我再试一次。

我个人在依赖$ scope时遇到麻烦，特别是我不建议在函数中返回$ scope。

试试这个：

app.factory("factoryExample", ['$http', function ($http) { return { Main: $http.get("js/models/data.json") } }]); //in controller app.controller('MainController', ['$scope', 'factoryExample', function ($scope, factoryExample) { factoryExample.Main.success(function(data){ $scope.customerReviews = data; }); }]);

正如你的帖子提到的，你好像能够在当地正确地获得json，我的不好。在这段代码之后，你的$ scope.customerReview应该正常工作！

<强> EDIT3

为您的示例提供您的JSON名称：

{ "foo": [ { "id ": "0 ", "title ": "Outstanding Employee! ", "text ": "too lazy to obfuscate all of my content", "image ": "<img class='img-responsive img-hover' src='images/GladisTolsa.jpg'> ", "href ": " ", "date ": "June 17, 2014 ", "author ": "Martha Castleberry ", "articleType ": "article ", "neverSettle ": "partnering ", "category ": "customerReviews " }, { "id ": "1 ", "title ": "Facilities Help ", "text ": "too lazy to obfuscate all of my content", "image ": "<img class='img-responsive img-hover' src='images/FernandoLopez.png'> ", "href ": " ", "date ": "June 17, 2014 ", "author ": "Lucy Valenzuela ", "articleType ": "article ", "neverSettle ": "innovating ", "category ": "customerReviews " }, { "id ": "2 ", "title ": "Outstanding Employee ", "text ": "too lazy to obfuscate all of my content", "image ": "<img class='img-responsive img-hover' src='images/MariaAlvarado.jpg'> ", "href ": " ", "date ": "June 17, 2014 ", "author ": "Martha Castleberry ", "articleType ": "article ", "neverSettle ": "engaging ", "category ": "customerReviews " }, { "id ": "3 ", "title ": "Thank you ", "text ": "too lazy to obfuscate all of my content", "image ": "<img class='img-responsive img-hover' src='images/MovingServices.jpg'> ", "href ": " ", "date ": "June 17, 2014 ", "author ": "The Graduate College ", "articleType ": "article ", "neverSettle ": "innovating ", "category ": "customerReviews " } ] }

然后使用：

<div ng-repeat="items in customerReviews.foo">{{items.id}}</div>

等等。

Answer 2

最后在网络服务器上获得了网站，同样的代码引发了sce unsafe错误。

我必须在返回之前将其信任为HTML！

HTML-trustifying helper function：

  function arrayToHTML(data) {
      for (i = 0; i < data.length; i++) {
          data[i]["id"] = $sce.trustAsHtml(data[i]["id"]);
          data[i]["title"] = $sce.trustAsHtml(data[i]["title"]);
          data[i]["text"] = $sce.trustAsHtml(data[i]["text"]);
          data[i]["image"] = $sce.trustAsHtml(data[i]["image"]);
          data[i]["date"] = $sce.trustAsHtml(data[i]["date"]);
          data[i]["author"] = $sce.trustAsHtml(data[i]["author"]);
          data[i]["articleType"] = $sce.trustAsHtml(data[i]["articleType"]);
          data[i]["neverSettle"] = $sce.trustAsHtml(data[i]["neverSettle"]);
          data[i]["category"] = $sce.trustAsHtml(data[i]["category"]);
          data[i]["href"] = $sce.trustAsHtml(data[i]["href"]);
      }
  }

工作代码：

// http get json content
$scope.customerReviews = [];
$http.get("js/models/data.json").success(function(data){
    console.log("success!");
    $scope.customerReviews = data;
    console.log($scope.customerReviews);
    arrayToHTML($scope.customerReviews); // This fixed it!
    return $scope.customerReviews;
});

AngularJS $ http.get：JSON有数字键 - 没有通缉键

2 个答案: