Question

有人可以解释并展示我如何使用Angular渲染复杂的JSON对象。

我正在调用FourSquare API，它会根据我的搜索（位置）返回推荐场所的列表。 JSON文件非常庞大，我发现很难在其中呈现相关数据。

这是我的JSON的样子： https://developer.foursquare.com/docs/explore#req=venues/explore%3Fnear%3DEarlsfield

这是我的控制器中调用url的函数。注意; baseurl =我用我的AccessId和Secret

建立的网址

//Get response from server  
function fetch(){
  $http.get(baseurl + $scope.search)
   .success(function(response){ 
    console.log(response.response.groups[0].items);
    $scope.details = response; 

   });

然后我希望能够用lis渲染我的结果。每个LI都有场地名称以及其他信息。目前我有以下内容：

     <div ng-if="!details">
            Loading...
        </div>

        <div ng-if="details.Response==='True'">
            <ul ng-repeat='groups in response'>
                <li>{{item.name}}</li>
                <li>{{item.address}}</li>

            </ul>
        </div>

        <div ng-if="details.Response==='False'">
          No results found.
        </div>

CODEPEN LINK： http://codepen.io/AntonioVassilev/full/EVrKxp/

我是Angular的新手，我发现浏览像这样的大型数据对象会让人感到困惑。帮助赞赏

Answer 1

details是一个对象，你无法循环它。首先抓取groups：与details.groups

一样

JSON结构：http://screencloud.net/v/Oqd

一些例子：

 <ul ng-repeat='group in details.groups'>

            <li>{{group.name}}</li>
            <li>{{group.type}}</li>

            <ul ng-repeat='item in group.items'>

            <pre>{{item}}</pre>

        </ul>

Some demo you can play with

Answer 2

你应该重复你的范围变量（scope.details）。根据你的js，正确的ng-repeats似乎是这样的：

<div ng-repeat='groups in details'>
  <div ng-repeat='group in groups'>
    <ul ng-repeat='item in group.items'>
        <li>{{item.name}}</li>
        <li>{{item.address}}</li>
    </ul>
   </div>
</div>

使用Angular渲染JSON

2 个答案: