Google AMP“显示更多按钮”组件不起作用

Question

I am working with Google AMP and I want to add a load more button in my template. I am following this example . I am getting data through JSON but something is fishy here I am getting this error in console service.js:255 Response must contain an array at " items "

My HTML template code

<amp-state id="tagsState"
  src="my_api_url">
    </amp-state>
    <amp-state id="tag">
        <script type="application/json">
            {
              "moreItemsPageIndex": 0,
              "hasMorePages": true
            }
        </script>
    </amp-state>
    <amp-list src="my_api_url"
      [src]="tagsState.contentItems"
      width="320"
      height="144"
      [height]="tagsState.contentItems.length * 24"
      class="m1">
      <template type="amp-mustache">
        <div class="searchResult-each">
            <div class="result-image-section">
                <amp-img src="{{mediaAsset.imageUrl}}" width="4" height="3" layout="responsive">
                    <amp-img src="my_site_url/static/web-rev/img/default_img.jpg" alt="DefaultImg" fallback width="4" height="3" layout="responsive"></amp-img>
                </amp-img>
                <div class="media-icon">
                    <span>00:22</span>
                    <i class="icon-video-play"></i>
                </div>
            </div>
            <div class="result-content-section">
                <div class="date-time">{{date}} </div>
                <div class="title">{{headline}}</div>
            </div>
        </div>          
      </template>
    </amp-list>
    <form method="GET"
      action="https://ampbyexample.com/json/more_related_tags_page"
      action-xhr="https://ampbyexample.com/json/more_related_tags_page"
      target="_top"
      on="submit-success: AMP.setState({
                tagsState: { 
                  contentItems: tagsState.contentItems.concat(event.response.contentItems)
                },
                tag: {
                  moreItemsPageIndex: tag.moreItemsPageIndex + 1,
                  hasMorePages: event.response.hasMorePages
                }
              });">
      <input type="hidden"
        name="moreItemsPageIndex"
        value="0"
        [value]="tag.moreItemsPageIndex">
      <input type="submit"
        value="Show more"
        class="ampstart-btn caps m1 show"
        [class]="(tag.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
    </form>

This is my JSON

    {
"envelope": {
"self": "/my_site_api_url/rest/v2/search/tag.json?deviceType=MOBILE&offset=0&pageSize=16&s=%D9%84%D9%88%D9%83%D8%A7%D9%83%D9%88&sort=DATE&supportsInfographic=true",
"revision": "2018-03-20T09:12:26Z",
"date": "2018-03-20T09:12:26Z",
"totalResults": 12,
"copyright": "كافة العلامات التجارية الخاصة بـ SKY وكل ما تتضمنه من حقوق الملكية الفكرية هي ملك لمجموعة Sky International AG ولا تستخدم إلا بتصريح مسبق",
"serverTime": "2018-03-20T13:59:54Z"
},
    "contentItems": [
        {
        "id": "1031930",
        "self": "/my_site_api_url/rest/v2/article/1031930.json",
        "revision": "2018-03-20T09:12:26Z",
        "date": "2018-03-20T09:12:26Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "\"كوابيس مورينيو\".. لاعبون أهملهم فصاروا نجوما",
        "summary": "بعد أسبوع صعب واجهه جوزيه مورينيو، مدرب مانشستر يونايتد الإنجليزي، بسبب الخروج من بطولة دوري أبطال أوروبا، عاد للواجهة موضوع اللاعبين الذين استغنى عنهم المدير الفني البرتغالي سابقا، وأصبحوا نجوما مؤثرين اليوم.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/03/20/1031926/{width}/{height}/1-1031926.jpg",
        "type": "IMAGE_SET",
        "caption": "مورينيو فشل في اكتشاف صلاح في تشلسي",
        "id": "1031926",
        "urlFriendlySuffix": "مورينيو-فشل-اكتشاف-صلاح-تشلسي",
        "autoPlay": false
        },
        "lastEditDate": "2018-03-20T09:12:26Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "كوابيس-مورينيو-لاعبون-أهملهم-فصاروا-نجوما"
        },
        {
        "id": "1031032",
        "self": "/my_site_api_url/rest/v2/article/1031032.json",
        "revision": "2018-03-17T10:23:59Z",
        "date": "2018-03-17T10:23:59Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "مورينيو يهاجم \"المتخاذلين\".. ويستشهد بـ\"الفشلة\"",
        "summary": "هاجم المدير الفني البرتغالي لمانشستر يونايتد جوزيه مورينيو، نجوم فريقه، وطالبهم بـ\"النضج\" وتحمل ضغوط اللعب لفريق بحجم \"الشياطين الحمر\".",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/03/17/1031031/{width}/{height}/1-1031031.jpg",
        "type": "IMAGE_SET",
        "caption": "مورينيو وضع اللوم على لاعبيه",
        "id": "1031031",
        "urlFriendlySuffix": "مورينيو-وضع-اللوم-لاعبيه",
        "autoPlay": false
        },
        "lastEditDate": "2018-03-17T10:23:59Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "مورينيو-يهاجم-المتخاذلين-ويستشهد-بـالفشلة"
        },
        {
        "id": "1029010",
        "self": "/my_site_api_url/rest/v2/article/1029010.json",
        "revision": "2018-03-10T15:38:41Z",
        "date": "2018-03-10T15:34:18Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "شاهد ماذا كتب مورينيو قبل تسجيل هدفين في مرمى ليفربول",
        "summary": "قالت صحيفة \"ذا صن\" البريطانية إن التغيير التكتيكي الذي أقدم عليه المدرب جوزيه مورينيو، ساهم في تسجيل مانشستر يونايتد هدفين عبر اللاعب ماركوس راشفورد في مرمى ليفربول، السبت.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/03/10/1029015/{width}/{height}/1-1029015.jpg",
        "type": "IMAGE_SET",
        "caption": "الملاحظة التي دوّنها مورينيو على مذكرته",
        "id": "1029015",
        "urlFriendlySuffix": "الملاحظة-دوّنها-مورينيو-مذكرته",
        "autoPlay": false
        },
        "lastEditDate": "2018-03-10T15:34:18Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "شاهد-كتب-مورينيو-تسجيل-هدفين-مرمى-ليفربول"
        },
        {
        "id": "1022760",
        "self": "/my_site_api_url/rest/v2/article/1022760.json",
        "revision": "2018-02-17T20:12:08Z",
        "date": "2018-02-17T20:12:08Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "اليونايتد إلى ربع نهائي كأس الاتحاد.. وجدل حول تقنية الفيديو",
        "summary": "تأهل مانشستر يونايتد إلى ربع نهائي كأس الاتحاد الإنجليزي بفوزه على مضيفه هادرسفيلد 2-صفر، السبت، في مباراة أثارت جدلا حول تقنية الفيديو المساعدة للحكام.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/02/17/1022759/{width}/{height}/1-1022759.jpg",
        "type": "IMAGE_SET",
        "caption": "ثنائية مان يونايتد حملت توقيع لوكاكو",
        "id": "1022759",
        "urlFriendlySuffix": "ثنائية-مان-يونايتد-حملت-توقيع-لوكاكو",
        "autoPlay": false
        },
        "lastEditDate": "2018-02-17T20:12:08Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "اليونايتد-ربع-نهائي-كأس-الاتحاد-وجدل-تقنية-الفيديو"
        },
        {
        "id": "1000806",
        "self": "/my_site_api_url/rest/v2/article/1000806.json",
        "revision": "2017-11-30T08:11:28Z",
        "date": "2017-11-30T08:11:28Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "صلاح يتخطى ميسي ورونالدو ويحرج العملاق البلجيكي",
        "summary": "\"ولكن هل يستطيع أن يفعلها بليلة باردة في ستوك؟\".. تلك كانت جملة شهيرة للمحلل الإنجليزي آندي غراي، الذي أكد أن نجوم العالم لن يكونوا بنفس التألق، عندما يلعبون في ملاعب البريميرليغ الشرسة والباردة، مثل ملعب بريتانيا لنادي ستوك سيتي.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/11/30/1000808/{width}/{height}/1-1000808.jpg",
        "type": "IMAGE_SET",
        "caption": "كعب صلاح يعلو في القارة العجوز",
        "id": "1000808",
        "urlFriendlySuffix": "كعب-صلاح-يعلو-القارة-العجوز",
        "autoPlay": false
        },
        "lastEditDate": "2017-11-30T08:11:28Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "صلاح-يتخطى-ميسي-ورونالدو-ويحرج-العملاق-البلجيكي"
        },
        {
        "id": "973948",
        "self": "/my_site_api_url/rest/v2/article/973948.json",
        "revision": "2017-08-19T15:57:41Z",
        "date": "2017-08-19T13:44:26Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "مان يونايتد يقضي على سوانزي بأربع دقائق",
        "summary": "حقق مانشستر يونايتد انتصارا كبيرا بنتيجة 4-0 على مضيفه نادي سوانزي، في الجولة الثانية من الدوري الإنجليزي الممتاز.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/08/19/973947/{width}/{height}/1-973947.JPG",
        "type": "IMAGE_SET",
        "caption": "كتيبة يونايتد سحقت سوانزي",
        "id": "973947",
        "urlFriendlySuffix": "كتيبة-يونايتد-سحقت-سوانزي",
        "autoPlay": false
        },
        "lastEditDate": "2017-08-19T13:44:26Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "مان-يونايتد-يقضي-سوانزي-بأربع-دقائق"
        },
        {
        "id": "965012",
        "self": "/my_site_api_url/rest/v2/article/965012.json",
        "revision": "2017-07-16T08:15:21Z",
        "date": "2017-07-16T08:15:21Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "إشادة بلوكاكو \"غير المهووس\" في مان يونايتد",
        "summary": "تألق مهاجم مانشستر يونايتد الجديد، روميلو لوكاكو، في مباراة فريقه التي انتهت السبت بالفوز 5-2 على لوس أنجلوس غالاكسي الأميركي، على الرغم من عدم تسجيله أي هدف.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/07/16/965011/{width}/{height}/1-965011.jpg",
        "type": "IMAGE_SET",
        "caption": "لوكاكو أثناء المباراة الودية مع لوس أنجلوس",
        "id": "965011",
        "urlFriendlySuffix": "لوكاكو-أثناء-المباراة-الودية-لوس-أنجلوس",
        "autoPlay": false
        },
        "lastEditDate": "2017-07-16T08:15:21Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "مورينيو-سعيد-مباراة-لوكاكو-الأولى"
        },
        {
        "id": "964816",
        "self": "/my_site_api_url/rest/v2/video/964816.json",
        "revision": "2017-07-15T11:50:17Z",
        "date": "2017-07-15T11:50:17Z",
        "type": "VIDEO",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "headline": "مورينيو: نسعى لضم مزيد من اللاعبين",
        "summary": "عزز مانشستر يونايتد صفوفه بضم كل من المهاجم البلجيكي لوكاكو، والمدافع السويدي فيكتور لينديلوف. وقال مدرب الفريق مدرب الفريق جوزيه مورينيو إن النادي لن يكتفي بلوكاكو وليندولف، وسيسعى لضم لاعبين آخرين.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/07/15/964822/{width}/{height}/1-964822.jpg",
        "type": "IMAGE_SET",
        "caption": "مدرب مان يونايتد جوزيه مورينيو",
        "id": "964822",
        "urlFriendlySuffix": "مدرب-مان-يونايتد-جوزيه-مورينيو",
        "autoPlay": false
        },
        "runTime": "00:00:16:07",
        "videoBulletin": false,
        "lastEditDate": "2017-07-15T11:50:17Z",
        "sectionUrl": "/sport",
        "category": "رياضة",
        "shareUrl": "https://www.skynewsarabia.com/video/964816",
        "urlFriendlySuffix": "مورينيو-نسعى-لضم-مزيد-اللاعبين",
        "hasThumbnail": false,
        "is360Video": false
        },
        {
        "id": "962511",
        "self": "/my_site_api_url/rest/v2/video/962511.json",
        "revision": "2017-07-06T18:09:03Z",
        "date": "2017-07-06T18:09:03Z",
        "type": "VIDEO",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "headline": "اتفاق لضم لوكاكو لمانشستر يونايتد",
        "summary": "نجح نادي مانشستر يونايتد، في التوصل لاتفاق من أجل ضم البلجيكي روميلو لوكاكو من إفرتون، بحسب ما كشفت شبكة سكاي سبورتس.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/07/06/962516/{width}/{height}/1-962516.jpg",
        "type": "IMAGE_SET",
        "caption": "اتفاق لضم لوكاكو لمانشستر يونايتد",
        "id": "962516",
        "urlFriendlySuffix": "اتفاق-لضم-لوكاكو-لمانشستر-يونايتد",
        "autoPlay": false
        },
        "runTime": "00:01:47:18",
        "videoBulletin": false,
        "lastEditDate": "2017-07-06T18:09:03Z",
        "sectionUrl": "/sport",
        "category": "رياضة",
        "shareUrl": "https://www.skynewsarabia.com/video/962511",
        "urlFriendlySuffix": "اتفاق-لضم-لوكاكو-لمانشستر-يونايتد",
        "hasThumbnail": false,
        "is360Video": false
        },
        {
        "id": "955096",
        "self": "/my_site_api_url/rest/v2/video/955096.json",
        "revision": "2017-06-07T08:52:08Z",
        "date": "2017-06-07T08:52:08Z",
        "type": "VIDEO",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "headline": "لوكاكو يعلن الرحيل عن إفرتون",
        "summary": "أكد المهاجم البلجيكي روميلو لوكاكو بأنه قد حسم مصيره النهائي وحدد وجهته الجديدة في الموسم المقبل. وقرر لوكاكو وضع حد لمسيرته مع إفرتون ليرحل عن النادي في الانتقالات الصيفية المقبلة.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/06/07/955123/{width}/{height}/1-955123.jpg",
        "type": "IMAGE_SET",
        "caption": "لوكاكو يعلن الرحيل عن إفرتون",
        "id": "955123",
        "urlFriendlySuffix": "لوكاكو-يعلن-الرحيل-إفرتون",
        "autoPlay": false
        },
        "runTime": "00:00:35:00",
        "videoBulletin": false,
        "lastEditDate": "2017-06-07T08:52:08Z",
        "sectionUrl": "/sport",
        "category": "رياضة",
        "shareUrl": "https://www.skynewsarabia.com/video/955096",
        "urlFriendlySuffix": "لوكاكو-يعلن-الرحيل-إفرتون",
        "hasThumbnail": false,
        "is360Video": false
        },
        {
        "id": "891108",
        "self": "/my_site_api_url/rest/v2/article/891108.json",
        "revision": "2016-11-09T19:02:26Z",
        "date": "2016-11-09T19:02:26Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "من كومان إلى لوكاكو: مكانك ليس هنا",
        "summary": "قال مدرب إيفرتون، رونالد كومان، الأربعاء، إن مهاجمه روميلو لوكاكو سيتعين عليه ترك الفريق المنافس في الدوري الإنجليزي الممتاز لكرة القدم ليكمل تطوره.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2015/09/29/778517/{width}/{height}/1-778517.jpg",
        "type": "IMAGE_SET",
        "caption": "المهاجم البلجيكي روميلو لوكاكو",
        "id": "778517",
        "urlFriendlySuffix": "المهاجم-البلجيكي-روميلو-لوكاكو",
        "autoPlay": false
        },
        "lastEditDate": "2016-11-09T19:02:26Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "كومان-للوكاكو-مكانك-خارج-إيفرتون"
        },
        {
        "id": "797481",
        "self": "/my_site_api_url/rest/v2/article/797481.json",
        "revision": "2015-12-08T01:39:30Z",
        "date": "2015-12-08T01:39:30Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "لوكاكو ينقذ إيفرتون من هزيمة أمام كريستال بالاس",
        "summary": "أحرز المهاجم البلجيكي روميلو لوكاكو هدفا في الدقائق الأخيرة ليقود إيفرتون للتعادل بهدف لمثله مع كريستال بالاس في الدوري الإنجليزي الممتاز لكرة القدم يوم الاثنين.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2015/12/08/797480/{width}/{height}/1-797480.jpg",
        "type": "IMAGE_SET",
        "caption": "لوكاكو محتفلا بهدف التعادل في مرمى كريستال بالاس",
        "id": "797480",
        "urlFriendlySuffix": "لوكاكو-محتفلا-بهدف-التعادل-مرمى-كريستال-بالاس",
        "autoPlay": false
        },
        "lastEditDate": "2015-12-08T01:39:30Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "لوكاكو-ينقذ-إيفرتون-هزيمة-أمام-كريستال-بالاس"
        }
    ],
"countsPerType": {
"ARTICLE": 9,
"IMAGE_GALLERY": 0,
"VIDEO": 3,
"BLOG": 0,
"INFOGRAPHIC": 0,
"LIVE_FEED": 0
},
"countsPerSection": {
"Middle_East": 0,
"Business": 0,
"Varieties": 0,
"Sport": 12,
"World": 0,
"Technology": 0
}
}

Also, I am confused on this part https://ampbyexample.com/json/more_related_tags_page I couldn't understand about this URL is this page need to be created or what else?

First I tried the example as documentation with their API it was working but when I start implementing my API on it then its not working

Answer 1

Rename "contentItems" to "items" in your response and it gonna help you. By default, a response has to have an array "items". Read more here an "Attributes" article, a "items (optional)" clause