algui91 algui91 - 4 months ago 19
JSON Question

Error trying to implement amp-mustache

I am trying to replicate this example (https://ampbyexample.com/components/amp-list/) with no success. I want to add a list using a

mustache
template, like this:

<ul>
<amp-list width=auto
height=100
layout=fixed-height
src="/assets/popular.json">
<template type="amp-mustache"
id="amp-template-id">
<li>
<a href={{url}}>{{title}}</a>
</li>
</template>
</amp-list>
</ul>


My
/assets/popular.json
file is:

{
"items": [
{
"title": "amp-carousel",
"url": "https://ampbyexample.com/components/amp-carousel"
},
{
"title": "amp-img",
"url": "https://ampbyexample.com/components/amp-img"
},
{
"title": "amp-ad",
"url": "https://ampbyexample.com/components/amp-ad"
},
{
"title": "amp-accordion",
"url": "https://ampbyexample.com/components/amp-accordion"
}
]
}


But I cannot get it to work, the values in the
json
are not being replaced in the template, I get this error:

Missing URL for attribute 'href' in tag 'a'


I do not know why the value
{{url}}
is not being replaced properly with the content of the
json
.

I've added the necessary scripts in the head.

Answer

It is solved now, the problem was I am using jekyll, and so the tags {{tag}} were being interpreted as a liquid tag. I solved it writing the code like this:

<ul>
<amp-list width=auto
    height=100
    layout=fixed-height
    src="/assets/popular.json">
  <template type="amp-mustache"
      id="amp-template-id">
    <li>
      <a href="{% raw %}{{url}}{% endraw %}">{% raw %}{{title}}{% endraw %}</a>
    </li>
  </template>
</amp-list>
</ul>

Update: I have written a more detailed explanation

Comments