Не могу вывести данные в шаблон руля - PullRequest
Новая
       4

Не могу вывести данные в шаблон руля

0 голосов
/ 27 июня 2018

Я получаю данные по асинхронному запросу. Я передаю данные в функцию и разбиваю их по строкам. Как передать строки в шаблон 

async function upComing() {

    const { results } = await $.ajax ("https://api.themoviedb.org/3/movie/upcoming?api_key=******************&language=en-US&page="+numberPage);
    const { genres } = await $.ajax ("https://api.themoviedb.org/3/genre/movie/list?api_key=******************&language=en-US");

    const movies = results.map(({genre_ids, ...rest}) => {
      const filteredIds = genres.filter(gen => genre_ids.includes(gen.id)); 
      const genreNames = filteredIds.map(gen_id => gen_id.name);

      return {
        ...rest,
        genreNames,
      };
    });

    const splittedArray = splitArray(movies);

    function splitArray(arr) {
      var result = [];
      let row = [];
      for (let i = 0; i < arr.length; i++) {
        const rowIndex = result.length;
        const len = rowIndex & 1 ? 2 : 4 ;
        row.push(arr[i]);
        if (row.length === len) {
          result.push(row);
          row = [];
        }
      }
      if (row.length) {
        result.push(row);
      }
      return result;
    }

    const source = document.getElementById("item").innerHTML;
    const template = Handlebars.compile(source);
    const html = template(splittedArray);
    var numberPage = 1;

    $(".content_movie").html(html);

upComing();

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Я нашел решение. Нужно было сделать помощника: 

Handlebars.registerHelper ('isEqual', function (v1, v2, options) {
if (v1 === v2) {
return options.fn (this);
}
return options.inverse (this);
});

И поменяйте шаблон: 

{{#each splittedArray}}
        {{#isEqual this.length 4 }}
            <div class="row">
                {{#each .}}
                    <div class="item_4">
                        <div class="container">
                        <a class="buttonFavoriteMovie" data-id="{{id}}" onclick="buttonFavoriteMovie({{id}})" href="/"></a> 
                        <a class="moveMovieInfo" onclick="movieSelected({{id}})" href="/item.html">
                        <img class="poster" src="https://image.tmdb.org/t/p/w300{{poster_path}}" onError="this.src='../img/No_image_available.png'" alt="{{title}}">
                        <h3 class="title">{{title}}</h3>
                        <h4 id="categories">{{genreNames}}</h4>
                        </a>
                        </div>
                    </div>
                {{/each}}      
            </div>
        {{else}}
            <div class="row">
             {{#each .}}
                    <div class="item_2">
                        <div class="container">
                        <a class="buttonFavoriteMovie" data-id="{{id}}" onclick="buttonFavoriteMovie({{id}})" href="/"></a> 
                        <a class="moveMovieInfo" onclick="movieSelected({{id}})" href="/item.html">
                        <img class="poster" src="https://image.tmdb.org/t/p/w300{{poster_path}}" onError="this.src='../img/No_image_available.png'" alt="{{title}}">
                        <h3 class="title">{{title}}</h3>
                        <h4 id="categories">{{genreNames}}</h4>
                        </a>
                        </div>
                    </div>
                {{/each}}
            </div>
        {{/isEqual}}
        {{/each}}

и у меня здесь ошибка: 

 const html = template({splittedArray});
changed to
 const html = template({splittedArray});
0 голосов
/ 28 июня 2018

Я пытался решить вашу проблему, я не нашел правильного ответа из-за

Ввод: 

Search:(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Выход: 

result : Array(3)
   0: (4) [{…}, {…}, {…}, {…}]
   1: (2) [{…}, {…}]
   2: (4) [{…}, {…}, {…}, {…}]

Но я исправил несколько ошибок и до сих пор не понимаю, чего вы пытаетесь достичь? Я думаю, что это невозможно, потому что вам нужно указать имя объекта, например: 

{
  people: [
   {firstName: "Yehuda", lastName: "Katz"},
   {firstName: "Carl", lastName: "Lerche"},
   {firstName: "Alan", lastName: "Johnson"}
  ]
}

Когда вы можете использовать шаблон, такой как: 

<script id="template" type="text/x-handlebars-template">
  {{#each result}}<article>
    <h4>{{Title}} <small>({{Year}})</small></h4>
  </article>
{{/each}}
</script>

Вот что я сделал, возьми и посмотри ссылку на код

...