我无法输出车把模板中的数据答案

【问题标题】：I can not output the data in the template of handlebars我无法输出车把模板中的数据
【发布时间】：2018-12-06 09:03:54
【问题描述】：

我获取异步请求的数据。我将数据传递给函数并将它们按行分解。如何将行传递给模板

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();

【问题讨论】：

您好，我想帮助您，但是您能提供一个json的例子吗？
1. (7) [数组(4), 数组(2), 数组(4), 数组(2), 数组(4), 数组(2), 数组(2)] 0:(4) [{…}, { …}, {…}, {…}] 1:(2) [{…}, {…}] 2:(4) [{…}, {…}, {…}, {…}] 3:( 2) [{…}, {…}] 4:(4) [{…}, {…}, {…}, {…}] 5:(2) [{…}, {…}] 6:( 2) [{…}, {…}]
嗨！还有一个问题。你用这个吗？常量 len = rowIndex & 1 ？ 2 : 4;
我一直在努力解决你的问题，发现你是怎么做到的，但是还有一个问题，你还需要我的帮助吗？
@VadimNikiforov 如果您查看我的代码github.com/slemik1/movie42，也许会更清楚我想要做什么

标签： javascript jquery templates async-await handlebars.js

【解决方案1】：

我一直在努力解决你的问题，我没有找到正确的答案，因为

输入：

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>

这是我所做的，看看a link to the code

【讨论】：

【解决方案2】：

我找到了解决方案。有必要做一个助手：

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});

【讨论】：