使用 Polymer Iron-ajax 检索 JSON 子数组答案

【问题标题】：Retrieving JSON sub-array using Polymer iron-ajax使用 Polymer Iron-ajax 检索 JSON 子数组
【发布时间】：2016-02-10 13:25:11
【问题描述】：

我正在尝试使用 Iron-ajax 检索 JSON 文件，以创建导航手风琴菜单。到目前为止，这在“顶级”标题中读取得很好，但我正在努力让子菜单名称返回。

我想知道我是否需要在 nav-head 元素中使用嵌套模板 dom-repeat，但到目前为止还没有成功。

JSON 示例：

{
 "headers": [
  {
   "name": "Header One",
    "sub": [
     {
      "name": "Sub Heading One"
     },
     {
      "name": "Sub Heading Two"
     }
    ]
   }
  ]
 }

聚合物代码：

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="nav-head.html">
<link rel="import" href="nav-sub.html">

<dom-module id="nav-accordion">
  <template>
    <style include="shared-styles">
    </style>

<iron-ajax auto
      url="../../../api/nav.json"
      handle-as="json"
      last-response="{{ajaxResponse}}"></iron-ajax>

<template is="dom-repeat" items="[[ajaxResponse.headers]]">
  <div class="horizontal-section">
    <nav-head heading=[[item.name]]></nav-head>
  </div>
</template>

</template>

<script>
(function() {
  'use strict';

  Polymer({
    is: 'nav-accordion',

    properties: {
    }

  });
})();

【问题讨论】：

标签： arrays json ajax polymer polymer-1.0

【解决方案1】：

这实际上很简单。在下面找到代码：

<template is="dom-repeat" items="{{ajaxResponse.headers}}" as="header">
  <div class="horizontal-section">
    <nav-head heading={{header.name}}>
      <template is="dom-repeat" items="{{header.sub}}" as="sub">
        <nav-sub subheading={{sub.name}}></nav-sub>
      </template>
    </nav-head>
  </div>
</template>

要记住的重要一点是使用“header.sub”获取子数组，而不是“ajaxResponse.sub”

【讨论】：