amp-list

jsonからデータ取得してそれを表示させる時に使います。
amp-list+amp-mustacheを組み合わせて使用します。

プラグインの読み込み

amp-listを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<amp-list width="auto"
  height="100"
  layout="fixed-height"
  src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
  <template type="amp-mustache">
    <div class="url-entry">
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>

//読み込まれるjson
{
 "items": [
   {
     "title": "AMP YouTube Channel",
     "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"
   },
   {
     "title": "AMPproject.org",
     "url": "https://www.ampproject.org/"
   },
   {
     "title": "AMP By Example",
     "url": "https://ampbyexample.com/"
   },
   {
     "title": "AMP Start",
     "url": "https://ampstart.com/"
   }
 ]
}

見ての通り、親要素がamp-list、子要素にmustacheテンプレートを入れています。
読み込みたいjsonは、amp-listのsrcプロパティに入れ込みます。
動作としては、itemsの一つ下の階層分ループして出している感じです。
ちなみに、itemsを指定していなくてもこれで正解の理由としては
第一階層のデフォルトがitemsだからです。
仮に違う場合は第一階層から順番に取得していく必要があります。

で、肝心のjsonですが、指定方法はSSLでの接続が必要となりますので、httpsからのURL形式で記述しましょう。
すいませんこのサーバ暗号化のしてないんでデモ作れないんですよ・・・(´；ω；｀)ｳｯ…
なのでちょっと試せていませんが、クロスドメインの時どうなんでしょうね・・・通常のjsonは読めなかったハズなのでjsonpって技術があるくらいですし

デフォルトを使用しないjson

{
"square": {
  "src": "../../images/fpo-square.png",
  "alt": "Square"
},
"avatar": {
  "src": "../../images/fpo-avatar.png",
  "alt": "Avatar"
}
}

例えばこんなJSONがあった場合の指定方法としては
{{square.src}}やら{{avatar.src}}になることになります。
複雑な処理は正直向いていない感じです。
正直ゴリゴリやりたければ普通に組んだ方がいいんじゃないか？って気がしますね。