Я пытаюсь проанализировать мой сложный файл json с помощью amp-list. Но есть большая проблема. Если я отобразил файл json, amp-list добавив дополнительные узлы / теги в html-файл. В чем будет проблема? Могу ли я перейти непосредственно использовать элемент изображения внутри моего файла JSON? Как я могу взять один и тот же каталог другой элемент? Например: images[0].
html-страница моего продукта
<amp-list src="./api/products.json" height="400" width="auto" items="." layout="fixed-height">
<template type="amp-mustache">
{{#module}}
{{#tabs}}
{{#products}}
{{#data}}
<amp-carousel width="377" height="377" layout="fixed">
{{#aggregatedColorSwatches}}
{{#shot}}
{{#images}}
{{#desktop}}
<amp-img src="{{ url }}" width="377" height="377"> </amp-img>
{{/desktop}}
{{/images}}
{{/shot}}
{{/aggregatedColorSwatches}}
</amp-carousel>
{{/data}}
{{/products}}
{{/tabs}}
{{/module}}
</template>
</amp-list>
Выход:
<amp-list>
<template type="amp-mustache">
{{#module}}
{{#tabs}}
{{#products}}
{{#data}}
<amp-carousel width="377" height="377" layout="fixed">
{{#aggregatedColorSwatches}}
{{#shot}}
{{#images}}
{{#desktop}}
<amp-img src="{{ url }}" width="377" height="377"> </amp-img>
{{/desktop}}
{{/images}}
{{/shot}}
{{/aggregatedColorSwatches}}
</amp-carousel>
{{/data}}
{{/products}}
{{/tabs}}
{{/module}}
</template>
<div role="list" class="i-amphtml-fill-content i-amphtml-replaced-content">
<div role="listitem"></div>
<div role="listitem">
<amp-carousel
layout="fixed"
height="377"
width="377"
class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<div class="i-amphtml-scrollable-carousel-container">
<amp-img
height="377"
width="377"
src=""
class="amp-carousel-slide amp-scrollable-carousel-slide i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<img
decoding="async"
src=""
class="i-amphtml-fill-content i-amphtml-replaced-content"/></amp-img
><amp-img
height="377"
width="377"
src=""
class="amp-carousel-slide amp-scrollable-carousel-slide i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<img
decoding="async"
src=""
class="i-amphtml-fill-content i-amphtml-replaced-content"
/></amp-img>
</div>
<div
tabindex="0"
class="amp-carousel-button amp-carousel-button-prev amp-disabled i-amphtml-screen-reader"
role="button"
aria-disabled="true"
></div>
<div
tabindex="0"
class="amp-carousel-button amp-carousel-button-next i-amphtml-screen-reader"
role="button"
aria-disabled="false"
></div
></amp-carousel>
<amp-carousel
layout="fixed"
height="377"
width="377"
class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<div class="i-amphtml-scrollable-carousel-container">
<amp-img
height="377"
width="377"
src=""
class="amp-carousel-slide amp-scrollable-carousel-slide i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<img
decoding="async"
src=""
class="i-amphtml-fill-content i-amphtml-replaced-content"/></amp-img
><amp-img
height="377"
width="377"
src=""
class="amp-carousel-slide amp-scrollable-carousel-slide i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<img
decoding="async"
src=""
class="i-amphtml-fill-content i-amphtml-replaced-content"
/></amp-img>
</div>
<div
tabindex="0"
class="amp-carousel-button amp-carousel-button-prev amp-disabled i-amphtml-screen-reader"
role="button"
aria-disabled="true"
></div>
<div
tabindex="0"
class="amp-carousel-button amp-carousel-button-next i-amphtml-screen-reader"
role="button"
aria-disabled="false"
></div
></amp-carousel>
<amp-carousel
layout="fixed"
height="377"
width="377"
class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<div class="i-amphtml-scrollable-carousel-container">
<amp-img
height="377"
width="377"
src=""
class="amp-carousel-slide amp-scrollable-carousel-slide i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<img
decoding="async"
src=""
class="i-amphtml-fill-content i-amphtml-replaced-content"/></amp-img
><amp-img
height="377"
width="377"
src=""
class="amp-carousel-slide amp-scrollable-carousel-slide i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout"
i-amphtml-layout="fixed"
style="width: 377px; height: 377px;"
>
<img
decoding="async"
src=""
class="i-amphtml-fill-content i-amphtml-replaced-content"
/></amp-img>
</div>
<div
tabindex="0"
class="amp-carousel-button amp-carousel-button-prev amp-disabled i-amphtml-screen-reader"
role="button"
aria-disabled="true"
></div>
<div
tabindex="0"
class="amp-carousel-button amp-carousel-button-next i-amphtml-screen-reader"
role="button"
aria-disabled="false"
></div
></amp-carousel>
</div>
<div role="listitem"></div>
<div role="listitem"></div>
<div role="listitem"></div>
<div role="listitem"></div>
<div role="listitem"></div></div
></amp-list>