2015-07-31 7 views
0

Я пытаюсь создать простую демонстрацию, которая извлекает сеансы кинотеатра на основе ввода данного почтового индекса. Представления театра вложены в объект объекта фильма, поэтому я запускаю цикл for внутри каждого цикла, который анализирует JSON. Я также использую функцию timeConvert, чтобы превратить метку времени в США в 12 часов.Ошибка при добавлении объекта

В настоящее время, это выглядит примерно так:

for (var j=0; j<movie.showtimes.length; j++) { 
      listing += '<li class="times-and-places"> 
        <div class="movie-theater">' 
        + movie.showtimes[j].theatre.name 
        + '</div><div class="movie-time"><li>' 
        + timeConvert(movie.showtimes[j].dateTime.slice(11,16)) 
        + '</li></div></li>'; 
     } 

Это прекрасно работает, но он возвращает другой элемент для каждого кинотеатра ShowTime с кинотеатром в нем, который выглядит немного громоздким. API, который я использую, не сочетает сеансы шоу в театре, и для каждого шоу есть другая запись. Я в основном реплицирую это в HTML. Так что если фильм играет кучу раз, он будет показывать:

MoviePlace1 1:30PM MoviePlace1 1:45PM MoviePlace1 2:00PM

Я хотел бы быть в состоянии объединить расписание сеансов читать:

MoviePlace1 1:30PM 1:45PM 2:00PM

Фильм API присваивает идентификатор каждый кинотеатр, поэтому я попытался написать условное условие if-else внутри цикла for.

for (var j=0; j<movie.showtimes.length; j++) { 
      tList.push(movie.showtimes[j].theatre.id); 
      var thingToFind = $(this).prev().find('.movie-time'); 
      var mTime = movie.showtimes[j].dateTime.slice(11,16); 
      var mTimeConverted = timeConvert(mTime).toString(); 

      if (tList[j] != tList[(j-1)] || tList[(j-1)] === null) { 
        listing += '<li class="times-and-places"> 
        <div class="movie-theater">' 
        + movie.showtimes[j].theatre.name 
        + '</div><div class="movie-time"><li>' 
        + timeConvert(movie.showtimes[j].dateTime.slice(11,16)) 
        + '</li></div></li>'; 

     } else { 
      console.log(mTimeConverted); 
      listing += thingToFind.append($("li").append(mTimeConverted + '</li>')); 

     } 

Условный оператор, который работает нормально, проверяет, является ли уникальным текущим кинотеатр ID по сравнению с предыдущими один или, если предыдущим ID не существует (массив Я толкаю значение ID очищает после бегаю через цикл анимации фильмов).

другое заявление, предназначенное для объединения различных сеансов-добавляет кучу пустых объектов JQuery для предыдущего листинга:

MoviePlace1 4:30PM [object Object][object Object]

Я попытался изменить его миллион различных способов вернуть фактическое значение вместо пустого объекта jQuery, но я не могу понять его. Может ли кто-нибудь помочь?

Вот образец объекта фильма, включая сеансы.

{ 
    "tmsId": "MV007117430000", 
    "rootId": "11455160", 
    "subType": "Feature Film", 
    "title": "Me and Earl and the Dying Girl", 
    "releaseYear": 2015, 
    "releaseDate": "2015-01-25", 
    "titleLang": "en", 
    "descriptionLang": "en", 
    "entityType": "Movie", 
    "genres": [ 
     "Comedy drama" 
    ], 
    "longDescription": "An awkward high-school senior (Thomas Mann) and a gravely ill classmate (Olivia Cooke) surprise themselves by becoming inseparable friends.", 
    "shortDescription": "A shy, awkward teenager and a gravely ill classmate become inseparable friends.", 
    "topCast": [ 
     "Thomas Mann", 
     "Olivia Cooke", 
     "Ronald Cyler II" 
    ], 
    "directors": [ 
     "Alfonso Gomez-Rejon" 
    ], 
    "officialUrl": "http://meandearlmovie.com/", 
    "qualityRating": { 
     "ratingsBody": "TMS", 
     "value": "3.5" 
    }, 
    "ratings": [ 
     { 
      "body": "Motion Picture Association of America", 
      "code": "PG-13" 
     } 
    ], 
    "advisories": [ 
     "Adult Language", 
     "Adult Situations" 
    ], 
    "runTime": "PT01H45M", 
    "preferredImage": { 
     "width": "240", 
     "height": "360", 
     "caption": { 
      "content": "Me and Earl and the Dying Girl (2015)", 
      "lang": "en" 
     }, 
     "uri": "assets/p11455160_p_v5_aa.jpg", 
     "category": "Poster Art", 
     "text": "yes", 
     "primary": "true" 
    }, 
    "showtimes": [ 
     { 
      "theatre": { 
       "id": "10420", 
       "name": "Violet Crown Cinema" 
      }, 
      "dateTime": "2015-07-21T11:00", 
      "barg": false 
     }, 
     { 
      "theatre": { 
       "id": "10420", 
       "name": "Violet Crown Cinema" 
      }, 
      "dateTime": "2015-07-21T17:10", 
      "barg": false 
     }, 
     { 
      "theatre": { 
       "id": "10420", 
       "name": "Violet Crown Cinema" 
      }, 
      "dateTime": "2015-07-21T22:10", 
      "barg": false 
     }, 
     { 
      "theatre": { 
       "id": "10984", 
       "name": "Alamo Drafthouse South Lamar" 
      }, 
      "dateTime": "2015-07-21T14:15", 
      "barg": false 
     }, 
     { 
      "theatre": { 
       "id": "10984", 
       "name": "Alamo Drafthouse South Lamar" 
      }, 
      "dateTime": "2015-07-21T17:05", 
      "barg": false 
     }, 
     { 
      "theatre": { 
       "id": "10984", 
       "name": "Alamo Drafthouse South Lamar" 
      }, 
      "dateTime": "2015-07-21T19:50", 
      "barg": false 
     }, 
     { 
      "theatre": { 
       "id": "10984", 
       "name": "Alamo Drafthouse South Lamar" 
      }, 
      "dateTime": "2015-07-21T22:10", 
      "barg": false 
     } 
    ] 

}

+0

Было бы полезно включить фрагмент исходных данных, которые вы получаете из API. –

+0

Извините, что – litel

+1

'thingToFind.append()' возвращает объект jQuery. Вы не можете использовать 'listing + jQuery' для их конкатенации. – Barmar

ответ

1

Учитывая ваши входные данные, то наилучший подход может быть реорганизовать его следующим образом:

var shows = showtimes.reduce(function (p, c) { 
    if (!p[c.theatre.id]) { 
     p[c.theatre.id] = { 
      theatreName: c.theatre.name, 
      showtimes: [c.dateTime] 
     }; 
    } else { 
     p[c.theatre.id].showtimes.push(c.dateTime); 
    } 
    return p; 
}, {}); 

Это даст вам объект, который выглядел примерно так:

{ 
    "9489": { 
     "theatreName": "Alamo Drafthouse at the Ritz", 
     "showtimes": [ 
      "2015-07-21T16:30", 
      "2015-07-21T19:30", 
      "2015-07-21T22:30" 
     ] 
    }, 
    "10420": { 
     "theatreName": "Violet Crown Cinema", 
     "showtimes": [ 
      "2015-07-21T12:00", 
      "2015-07-21T13:20", 
      "2015-07-21T15:50", 
      "2015-07-21T18:25" 
     ] 
    } 
} 

Теперь вы можете перебирать это объект (или преобразовать его обратно в массив, если вы действительно этого захотите) с циклом for...in и построить из него свой HTML-код.

Что-то вроде:

for (var t in shows) { 
    if (shows.hasOwnProperty(t)) {   
     listing += '<li class="times-and-places">' 
       + '<div class="movie-theater">' 
       + shows[t].theatreName 
       + '</div><div class="movie-time">'; 
     for (var i=0; i < shows[t].showtimes.length; i++) { 
      listing += '<li>' 
       + timeConvert(shows[t].showtimes[i].slice(11,16)) 
       + '</li>'; 
     } 

     listing += '</div></li>'; 
    } 
} 

Что бы дать HTML, что в конце концов смотрел что-то вроде этого (игнорируя все, что timeConvert может сделать):

<li class="times-and-places"> 
    <div class="movie-theater">Alamo Drafthouse at the Ritz</div> 
    <div class="movie-time"> 
     <li>16:30</li> 
     <li>19:30</li> 
     <li>22:30</li> 
    </div> 
</li> 
<li class="times-and-places"> 
    <div class="movie-theater">Violet Crown Cinema</div> 
    <div class="movie-time"> 
     <li>12:00</li> 
     <li>13:20</li> 
     <li>15:50</li> 
     <li>18:25</li> 
    </div> 
</li> 
+0

Я могу console.log данные 'show', но у меня возникли проблемы с этим. Chrome Dev Tools сообщает мне «Uncaught TypeError: Невозможно прочитать свойство« срез »неопределенной (анонимная функция)» – litel

+0

@litel: Моя ошибка, я оставил ваше свойство 'dateTime' там, когда оно больше не понадобилось. –

+0

Спасибо! И еще одна вещь: похоже, это делает LI раз вне класса «время кино». Это проблема, связанная с асинхронным AJAX? – litel

0

Изменение:

listing += thingToFind.append($("li").append(mTimeConverted + '</li>')); 

к:

listing += '<li>' + mTimeConverted + '</li>'; 

После того, как цикл будет завершен, сделать:

thingToFind.append(listing); 
0

Вы могли бы уменьшить массив Showtimes:

var showtimes = [{ 
 
    "theatre": { 
 
    "id": "10420", 
 
    "name": "Violet Crown Cinema" 
 
    }, 
 
    "dateTime": "2015-07-21T11:00", 
 
    "barg": false 
 
}, { 
 
    "theatre": { 
 
    "id": "10420", 
 
    "name": "Violet Crown Cinema" 
 
    }, 
 
    "dateTime": "2015-07-21T17:10", 
 
    "barg": false 
 
}, { 
 
    "theatre": { 
 
    "id": "10420", 
 
    "name": "Violet Crown Cinema" 
 
    }, 
 
    "dateTime": "2015-07-21T22:10", 
 
    "barg": false 
 
}, { 
 
    "theatre": { 
 
    "id": "10984", 
 
    "name": "Alamo Drafthouse South Lamar" 
 
    }, 
 
    "dateTime": "2015-07-21T14:15", 
 
    "barg": false 
 
}, { 
 
    "theatre": { 
 
    "id": "10984", 
 
    "name": "Alamo Drafthouse South Lamar" 
 
    }, 
 
    "dateTime": "2015-07-21T17:05", 
 
    "barg": false 
 
}, { 
 
    "theatre": { 
 
    "id": "10984", 
 
    "name": "Alamo Drafthouse South Lamar" 
 
    }, 
 
    "dateTime": "2015-07-21T19:50", 
 
    "barg": false 
 
}, { 
 
    "theatre": { 
 
    "id": "10984", 
 
    "name": "Alamo Drafthouse South Lamar" 
 
    }, 
 
    "dateTime": "2015-07-21T22:10", 
 
    "barg": false 
 
}]; 
 

 
function reduceShowtimes(showtimes) { 
 
    var theatres = {} 
 
    var showsReduced = showtimes.reduce(function(arr, obj) { 
 
    var theatreName = obj.theatre.name; 
 
    if (theatres[theatreName] !== undefined) { 
 
     var theatreIndex = theatres[theatreName]; 
 
     var theatreObj = arr[theatreIndex]; 
 
     theatreObj.dateTime.push(obj.dateTime); 
 
    } else { 
 
     theatres[theatreName] = arr.length; 
 
     obj.dateTime = [obj.dateTime]; 
 
     arr.push(obj); 
 
    } 
 
    return arr; 
 
    }, []); 
 
    return showsReduced; 
 
} 
 
var result = document.getElementById('result').innerHTML = JSON.stringify(reduceShowtimes(showtimes), null, '\t');
<pre id="result"></pre>

Смежные вопросы