Question

我试图通过JSON对象循环，但我还没发现它为什么不能正常工作。我只需要事件数组中的标题和描述。

JSON对象如下所示：

{
last_item: null,
total_items: "32",
first_item: null,
page_number: "1",
page_size: "10",
page_items: null,
search_time: "0.033",
page_count: "4",
events: {
event: [
{
watching_count: null,
olson_path: "Europe/Zurich",
calendar_count: null,
comment_count: null,
region_abbr: "SO",
postal_code: null,
going_count: null,
all_day: "0",
latitude: "47.35",
groups: null,
url: "http://eventful.com/events/sons-morpheus-/E0-001-093285411-2?utm_source=apis&utm_medium=apim&utm_campaign=apic",
id: "E0-001-093285411-2",
privacy: "1",
city_name: "Olten",
link_count: null,
longitude: "7.91667",
country_name: "Switzerland",
country_abbr: "CHE",
region_name: "Solothurn",
start_time: "2016-08-06 20:00:00",
tz_id: null,
description: " <strong>Age Limit:</strong> All Ages<br><br> Sons of Morpheus<br><br> ",
modified: "2016-05-09 02:54:25",
venue_display: "1",
tz_country: null,
performers: null,
title: "Sons of Morpheus",
venue_address: null,
geocode_type: "City Based GeoCodes",
tz_olson_path: null,
recur_string: null,
calendars: null,
owner: "evdb",
going: null,
country_abbr2: "CH",
image: null,
created: "2016-05-09 02:54:25",
venue_id: "V0-001-002017740-6",
tz_city: null,
stop_time: null,
venue_name: "Schutzi",
venue_url: "http://eventful.com/venues/schutzi-/V0-001-002017740-6?utm_source=apis&utm_medium=apim&utm_campaign=apic"
},
[...]

我的控制器：

.controller('EventsCtrl', function($scope, $http) {

    $http.get("https://api.eventful.com/json/events/search?c=music&app_key=XXX&date=Future&location=Solothurn").success(function(data) {
        $scope.eventes = data;
    })
})

我的循环：

<div class="card" ng-repeat="card in eventes">
    <div class="card-image waves-effect waves-block waves-light">
    </div>
    <div class="card-content">
      <span class="card-title" ng-bind-html="card.events.event[0].title"></span><br><br>
      <div class="icon">

    </div>

Answer 1

选项1：试试这个：

<div class="card" ng-repeat="card in eventes.events.event">

这是对象/ json结构的正确映射。

选项2： 或者你可以改变你的控制器：

.controller('EventsCtrl', function($scope, $http) {
    $http.get("https://api.eventful.com/json/events/search?c=music&app_key=XXX&date=Future&location=Solothurn").success(function(data) {
        $scope.eventes = data.events.event;
    })
})

然后您应该可以使用原始模板：

<div class="card" ng-repeat="card in eventes">

旁注，您可能希望使用这种方式检查空值，因为数据或data.events可能为null并且会引发js错误。

Answer 2

您可以尝试以下

<div class="card" ng-repeat="card in eventes.events.event">
    <div class="card-image waves-effect waves-block waves-light">
    </div>
    <div class="card-content">
      <span class="card-title" ng-bind-html="card.title"></span><br><br>
      <!-- To access description use card.description -->         
      <div class="icon">

    </div>

通过json数据循环不能与AngularJS一起使用

2 个答案: