如何在 Angularjs 1.0 中读取 JSON 文件？答案

【问题标题】：How to read a JSON file in Angularjs 1.0?如何在 Angularjs 1.0 中读取 JSON 文件？
【发布时间】：2017-11-04 08:48:22
【问题描述】：

我需要读取 angular 1.6 格式的 JSON 格式文件，所以我执行以下操作

在 HTML 中

    <div ng-model="JsonRendering" ng-controller="NewsRendering">
        <div ng-repeat="NewsData in News">
            <h3>{{NewsData.Title}}</h3>
        </div>
    </div>

在脚本中

angular
    .module( "JsonRendering", [])
    .controller("NewsRendering", [ "$scope", "$http", function ($scope, $http) {
        $http({
            method: 'GET',
            url: 'News/News.json'
        }).then(function success(data) {
            $scope.News = data;
        });
    }]);

在 JSON 中

{
  "articles": [

    {
      "Title": "Article 1",

      "Abstract": "Article 1 abstract starts here ...",

      "Body": "Article 1 body starts here....."
    }
  ]
}

我试图只呈现标题，但它不起作用。它显示在网页{{NewsData.Title}} 上。

注意： json 文件是文件夹内的本地 JSON 文件。所以json文件的路径是“Root/News/News.json那么应该怎么解决问题

【问题讨论】：

$scope.News = JSON.parse(data);
打开浏览器控制台。阅读错误。修理它。然后意识到您正在尝试迭代 HTTP 响应，而不是迭代 JSON 对象的文章数组，该对象是响应的主体（即 data 属性）。使用调试器会有所帮助。
那么这意味着你甚至没有启动你的 Angular 应用程序。浏览器可能无法找到或加载包含您的代码的 JS 文件。
我怀疑你没有任何错误，那么。在 plunkr 中发布一个完整的最小示例来重现该问题。
Angular 无法解析 {{NewsData.Title}} 的原因只有两个，而您在页面上也看到了这样的情况：要么抛出错误，要么 HTML 不在 Angular 的范围内。如果不是第一个选项，那就是第二个。您显示的代码与它没有任何关系。如果您需要帮助解决问题，您真的必须展示一个我们可以尝试的演示 (minimal reproducible example)。

标签： html angularjs json

【解决方案1】：

改成，你应该使用data.data

.controller("NewsRendering", [ "$scope", "$http", function ($scope, $http) {
        $http({
            method: 'GET',
            url: 'News/News.json'
        }).then(function success(data) {
            $scope.News = data.data;
        });
    }]);

你的 ng-repeat 应该是，

 <div ng-repeat="NewsData in News.articles">
            <h3>{{NewsData.Title}}</h3>
 </div>

DEMO

【讨论】：

正确，但还不够。 OP 还需要对文章进行迭代。（我不是反对者）。
它在页面上显示 {{NewsData.Title}}。控制台没有错误
@HTMLMan 正如上面提到的 JBNizet，您的应用似乎还没有启动。
@Sajeetharan 这是我在使用“ng-app="JsonRendering”时使用“ng-model=JsonRendering”的问题。现在它正在工作，非常感谢。
@JBNizet 是的，看起来如此