AngularJS ng-repeat - http.gs 检索数据，但不显示 [英] AngularJS ng-repeat - http.gs retrieving data, but not displaying

问题描述

我是 angular 的新手，并试图将它集成到我的应用程序中.我试图使用一个简单的 $http.get 到一个 .JSON 文件，它在 ng-repeat

中显示匹配的内容

这是我的:

$scope.countries = [];$http.get('/resources/data/countries-report.json').success(function(data) {$scope.countries = data.countries;//警报(JSON.stringify($scope.countries));控制台日志(数据.国家)；控制台日志(数据.国家.人口)；}).错误(函数(错误){警报('错误')；});

这是我的 .JSON 文件:

<代码>{"firstName" : "乔","surName": "博客",国家":[{ "name": "France", "population": "63.1" },{名称":跨度"，人口":52.3"}，{ "name": "United Kingdom", "population": "61.8" }]}

这是我的 HTML:

{{country.name}} 的人口为 {{country.population}}

在浏览器中查看时，显示的是:

• 人口为
• 人口为
• 人口为

似乎我的代码可以看到有 3 个国家/地区，因为当我在 .JSON 文件中添加或删除时，HTML 中的列表会相应地修改，但是，.JSON 的内容没有显示.

>

我忘记从我的 .get 返回数据了吗??

** 更新****************************

正如有些人提到的，我的代码似乎是正确的，我想我知道问题可能出在哪里.

我的应用程序使用 Swig 的 HTML 模板结构，该结构使用 {{ }} 访问 .JSON 文件.这会导致与 Angular 混淆吗?

** 更新****************************

如果我改变:

var app = angular.module("app", []);

到

var app = angular.module('app', []).config(function($interpolateProvider){$interpolateProvider.startSymbol('{[{').endSymbol('}]}');});

还有:

{{country.name}} 的人口为 {{country.population}}

致:

{[{country.name}]} 人口为 {[{country.population}]}

然后显示正确的值.

解决方案

你必须像

这样以对象形式获取数组中的数据<预><代码>[{编号:1，ima:gh.jpg,数据:[{另一个id:1，我的:w，ki:y}]},{id=2,ima:jh.jpg}]

I am new to angular and trying to integrate it within my application. I am attempting to use a simple $http.get to a .JSON file, which displaying the matching contents in a ng-repeat

Here my get:

$scope.countries = [];
$http.get('/resources/data/countries-report.json').success(function(data) {
    $scope.countries = data.countries;
    // alert(JSON.stringify($scope.countries));
    console.log(data.countries);
    console.log(data.countries.population);
}).error(function(error) {
    alert('error');
});

Here's my .JSON file:

{
  "firstName"   : "Joe",
  "surName" : "Bloggs",
  "countries" : [
      { "name": "France", "population": "63.1" },
      { "name": "Span", "population": "52.3" },
      { "name": "United Kingdom", "population": "61.8" }
  ]
}

Here is my HTML:

<li ng-repeat="country in countries">
    {{country.name}} has population of {{country.population}}
</li>

When viewing in the browser, all that is displayed is:

• has population of
• has population of
• has population of

It seems as though my code can see there are 3 countries, as when i add or remove from my .JSON file, the list in the HTML modifies accordingly, however, the contents of the .JSON is not displaying.

Have i forgot to return the data from my .get??

** UPDATE *************************

As some have mentioned, my code seems to be correct, i think i know what the problem may be.

My application makes use of a HTML templating structure using Swig which accesses .JSON file using {{ }}.. Could this be causing confusion with Angular?

** UPDATE *************************

If i change:

var app = angular.module("app", []);

to

var app = angular.module('app', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
    }
);

And:

<li ng-repeat="country in countries">
     {{country.name}} has population of {{country.population}}
</li>

To:

<li ng-repeat="country in countries">
     {[{country.name}]} has population of {[{country.population}]}
</li>

Then the correct values are displayed.

解决方案

you have to get the data in the array of object form like

[
  { 
    id:1,
    ima:gh.jpg,
    data: 
    [
      {
        anotherid:1,
        my:w,
        ki:y
      }
    ]
  },
  {
    id=2,
    ima:jh.jpg
  }
]

这篇关于AngularJS ng-repeat - http.gs 检索数据，但不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！