Google AMP显示更多按钮组件无效

时间:2018-03-21 07:16:10

标签: html json amp-html accelerated-mobile-page google-amp

我正在使用 Google AMP ,我想在我的模板中添加更多加载按钮。我关注this example。我通过 JSON 获取数据但是这里有些东西我在控制台中遇到此错误service.js:255 Response must contain an array at " items "

我的HTML模板代码

<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>

这是我的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
}
}

另外,我对此部分感到困惑https://ampbyexample.com/json/more_related_tags_page我无法理解这个网址是否需要创建此页面或其他什么内容?

首先,我尝试将这个示例作为文档与他们的API一起工作,但是当我开始实现我的api然后它无法正常工作

1 个答案:

答案 0 :(得分:1)

重命名&#34; contentItems&#34;到&#34;项目&#34;在你的回复中,它会帮助你。默认情况下,响应必须有一个数组&#34; items&#34;。 Read more here&#34;属性&#34; article,a&#34; items(optional)&#34;条款