アセットとエントリーをまとめてループする

Question

特定のContentTypeからすべてのコンテンツをループアウトすることができました。それがレンダリングする。この特定のケースで

として： エントリ1つの エントリ2 エントリ3 資産1つの 資産2 資産3

私はそれはのようにレンダリングしたい：エントリ1資産1、入力2アセット・2等...

:)

Javascriptを助けていないフィールドのループ内の資産・アレイ・ループを置きます10

HTML

<script id="myEntries" type="text/template"> 
    {{#items}} 
     <h1>{{fields.header}}</h1> 
     <p>{{fields.description}}</p> 
    {{/items}} 

    {{#includes.Asset}} 
     <p>File: <img src="https:{{fields.file.url}}?fit=thumb&f=top_left&h=200&w=200" width="100"/></p> 
    {{/includes.Asset}} 
</script> 

<div class="result"></div> 

JSON https://jsfiddle.net/pcgn73zf/

あなたの助けが大好きです！

Answer 1

こんにちはは多分あなたはドキュメントでそれを逃したが、あなたがイメージを持っているのcontentTypeポストを持っている場合contentful JS SDKはすでに、例えば、リンクの解決を行います項目を取得すると、その項目の項目に直接アクセスすることができます。リンクされたアセットからurlを取得するには、myEntry.fields.image.fields.file.urlをリクエストしてください。それを要求する必要はありません。 あなたのコード内の資産部分が

<p>File: <img src="https:{{fields.image.fields.file.url}}?fit=thumb&f=top_left&h=200&w=200" width="100"/></p> 

もっとに関する情報についてclient.getEntries() このREADME section

Answer 2

あなたはresponse.toPlainObject()でJSONをお世辞にしています。必要なプロパティを希望の順序で読み込みます。

例：

var input = { 
 
    entries: [ 
 
    { 
 
     text: "Entry 1" 
 
    }, 
 
    { 
 
     text: "Entry 2" 
 
    } 
 
    ], 
 
    assets: [ 
 
    { 
 
     text: "Asset 1" 
 
    }, 
 
    { 
 
     text: "Asset 2" 
 
    } 
 
    ] 
 
}; 
 

 
var i = 0; 
 
while (i < Math.max(input.entries.length, input.assets.length)) { 
 
    if (i < input.entries.length) { 
 
    document.write(input.entries[i].text + ", "); 
 
    } 
 
    if (i < input.assets.length) { 
 
    document.write(input.assets[i].text + ", "); 
 
    } 
 
    i++; 
 
}