Question

我正在尝试使用手柄片段使以下简单的html正常工作。该示例具有以下

从外部API获取数据（为简单起见，脚本本身提供了json）
（Map-Reduce）将json中的键值映射并缩小为一个对象（可以直接是json吗？）
将简化后的对象提供为用于把手编译的数据。

我看到的问题在于正确的映射和车把编译。最后，html应该使用其详细信息渲染两个人。请纠正我，以获得获得结果的优化代码。

我有一个相关的问题，这里的json结构略有变化。 Key-Value Pair Json transformation and conversion into a class in Javascript / Jquery

<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
</head>

<body>

  <div id="anchor">This div should append people data dynamically below. if not there is an error</div>

  <script>
    var url = 'data.json';
  </script>
  <!-- 3. Template -->
  <script id="tpl" type="text/template">
    {{#each this}}
    <div><b><a href="{{id}}">Id: {{id}} First Name : {{firstname}} First Name : {{lastName}}</a></b> Gender : {{gender}}, Age : {{age}} Address : {{address}}</div>
    {{/each}}
  </script>
  <!--4. Handlebars.js slingshot -->
  <script>
    //4a.function creation
    var slingshot = function(url, tplId, anchor) {
      $.getJSON(url, function(data) {
        // for simplicity giving the data object below
        data = [{
          "id": "2IJXhq",
          "fields": [{
            "key": "gender",
            "value": "male"
          }, {
            "key": "address",
            "value": "1234, some ln, Los Angeles, CA 9303"
          }, {
            "key": "age",
            "value": "25"
          }],
          "firstName": "David",
          "lastName": "Smith",
          "website": "davidsmith.com"
        }, {
          "id": "3GJXhq",
          "fields": [{
            "key": "gender",
            "value": "male"
          }, {
            "key": "address",
            "value": "1234, some ln, New York, NY 12012"
          }, {
            "key": "age",
            "value": "30"
          }],
          "firstName": "John",
          "lastName": "Crowe",
          "website": "johncrowe.com"
        }]
        //however, please provide a solution after commenting above line to get the json data directly in .getJson(data)
        let o = data.map(item => item
          .reduce((a, {
            key,
            Value
          }) => ({
            [key]: Value,
            ...a
          }), {}))
        var template = $(tplId).html();
        var result = Handlebars.compile(template)(o);
        $(anchor).append(result);
      });
    }
    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor');
  </script>
</body>

</html>

映射减少来自api的json并使用HTML中的Handlebarsjs显示

0 个答案: