求助：AMP-list无法渲染关联JSON文件返回的数据

我之前也碰到过类似的amp-list渲染空白的情况，结合你描述的背景（有合规JSON、CORS URL、正确AMP头、无控制台错误），咱们一步步排查可能的问题：

• 检查模板与JSON的绑定匹配度
  一定要确保Mustache模板里的变量名和JSON响应里的键完全一致（大小写敏感！）。比如如果你的JSON返回{"currency": "USD"}，模板里就得写{{currency}}，不能写成{{Currency}}或者{{curr}}。
  另外确认模板的写法是否正确，必须用<template type="amp-mustache">，且要放在amp-list内部或者通过template属性引用外部模板ID：

  <amp-list src="你的CORS接口地址" layout="fixed-height" height="40">
    <template type="amp-mustache">
      <span>当前币种：{{currency}}</span>
    </template>
  </amp-list>
  

• 验证JSON响应的结构规范
  AMP-list要求JSON响应必须是包含items数组的对象（除非你通过items属性指定了数据路径）。比如正确的结构应该是：

  {
    "items": [
      {"currency": "USD"},
      {"currency": "EUR"}
    ]
  }
  

  如果你的JSON数据不是嵌套在items里，比如直接是数组[{"currency":"USD"}]，那得给amp-list加上items="."属性，告诉它直接用根数组作为数据源。

• 再确认CORS配置的细节
  除了Access-Control-Allow-Origin，AMP还要求响应头包含AMP-Access-Control-Allow-Source-Origin，值必须和你的AMP页面的源域名完全一致（比如https://your-amp-domain.com）。同时要确保JSON响应的Content-Type是application/json，不能是text/plain之类的。

• 检查amp-list的布局设置
  如果用了layout="fixed-height"，要确保height值足够容纳渲染后的内容，不然内容会被隐藏导致看起来是空白。可以临时把height设大一点（比如height="100"）测试下。或者换成layout="responsive"并设置合理的宽高比例，比如width="300" height="50"。

• 直接测试JSON接口
  在浏览器地址栏直接打开你的JSON URL，确认返回的内容是纯净的JSON，没有多余的HTML注释、空格或者语法错误。另外可以用AMP官方的Validator工具（在浏览器控制台输入amp.validate()）再扫一遍页面，有时候控制台没弹出错误，但Validator能发现一些细节问题。

如果做完这些排查还是没解决问题，可以把你的HTML模板代码、JSON响应内容贴出来，这样能更精准地定位问题~

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