API直接返回数组时如何正确使用amp-list组件？

刚好我之前也遇到过这个问题，你说的没错，amp-list默认要求接口返回一个包含items数组的JSON对象，但如果你的接口直接返回数组，确实可以用"."来搞定，具体操作很简单：

核心解决方案：添加items="."属性 #

你只需要在<amp-list>标签里加上items="."，它就会把接口返回的整个数组当作要渲染的数据源，而不是去查找响应里的items字段。

完整代码示例 #

下面是针对你提供的接口返回格式写的完整示例：

<!-- 先在页面头部引入必要的AMP组件脚本 -->
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<!-- 你的amp-list组件 -->
<amp-list layout="fixed-height" height="300" src="你的API接口地址" items=".">
  <!-- 模板部分，直接遍历数组中的每个对象 -->
  <template type="amp-mustache">
    <div class="item-container">
      <h4>{{name}}</h4>
      <p>ID: {{id}} | 分类: {{category}}</p>
    </div>
  </template>
  <!-- 加载失败/未加载时的占位内容 -->
  <div fallback>加载数据中，请稍候...</div>
</amp-list>

关键细节说明 #

• items="."：这个属性是核心，它告诉amp-list「直接使用接口返回的整个响应作为items集合」，完美适配你的接口返回格式。
• 模板语法：因为每个模板的上下文就是数组里的单个对象，所以直接用{{name}}、{{id}}这种方式引用属性即可，和正常渲染items数组的写法完全一致。
• 注意JSON格式：你示例里的数组元素末尾有多余的逗号（比如{"name":"xxx","id":2663755,"category":"sss",}），这个一定要去掉，否则AMP会解析失败。

这样设置之后，amp-list就能正常渲染你的接口返回的数组数据了，亲测有效！

内容的提问来源于stack exchange，提问作者rajat44