restfirebaseamp-htmlamp-list

amp-list won't show data from firebase rest api while query parameters are added


I am using amp-list with firebase REST api. The thing is when I use "https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json" I get the amp-list populated,but when I add query parameters "https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json?orderBy=%22first_cat%22&equalTo=%22BREAKFAST%22&print=pretty" I get empty amp-list.

Here is the code

<amp-list width="300"
                      height="250"
                      single-item
                      items="."
                      layout="responsive"
              src="https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json?orderBy=%22first_cat%22&equalTo=%22BREAKFAST%22&print=pretty">
              <template type="amp-mustache">
                  <div>
                      <dt class="col col-10 h3 mb1">{{title}}</dt>
                      <dd class="col col-2 m0 mb1 self-center right-align">₹{{price}}</dd>
                  </div>

              </template>
            </amp-list>

Solution

  • The amp-list response must be a JSON object containing an array property.

    Your filtered query (second link) returns a JSON object which does not contain an array.

    Your response for this should be something like below

    [
      {
        "discounted": 157,
        "first_cat": "BREAKFAST",
        "id": "eEaVn8",
        "onSale": false,
        "price": 167,
        "third_cat": "Egg",
        "title": "Egg omlete"
      },
      {
        "discounted": 210,
        "first_cat": "BREAKFAST",
        "id": "pia9nL",
        "onSale": false,
        "price": 228,
        "third_cat": "Waffles",
        "title": "Banana & Nutella waffles"
      }
    ]