2016-10-23 9 views
0

こんにちは、私はすべてのデータがjsonファイルから来ているjavascript/jqueryスライダを達成したいと思います。すべての画像と画像の一部を印刷したいと思います。以下のブートストラップ3は、JSONファイルであるように、画像に対応したすべてのデータは、あなたはjQueryのAPIサイトに記載このjqueryのjsonからデータを取得する

{ 
    data: [{ 
     slug: "allsopp-allsopp", 
     id: 401, 
     imageToken: "d045e18526f988cceb63b08e71180fb6595d9f27", 
     name: "Allsopp & Allsopp", 
     location: "Dubai", 
     description: "Allsopp & Allsopp is a family", 
     residentialForRentCount: 521, 
     residentialForSaleCount: 1114, 
     commercialForRentCount: 1, 
     commercialForSaleCount: 0, 
     commercialTotalCount: 1, 
     totalProperties: 1636, 
     agentCount: 57, 
     licenseLabel: "RERA", 
     licenseNumber: "1815", 
     phone: "+971 4 429 4444", 
     links: { 
      self: "/en/broker/allsopp-allsopp-401", 
      logo: "https://www.propertyfinder.ae/images/pf_broker/logo/d045e18526f988cceb63b08e71180fb6595d9f27/desktop", 
      logo2x: "https://www.propertyfinder.ae/images/pf_broker/logo/d045e18526f988cceb63b08e71180fb6595d9f27/desktop2x" 
     } 
    }, 
    { 
     slug: "espace-real-estate", 
     id: 524, 
     imageToken: "2d4dfd5c40d4079dd962adf2fd6277dc3e1e9f2e", 
     name: "Espace Real Estate", 
     location: "Dubai", 
     description: "UAE. Tel no: 043069999 ORN:936", 
     residentialForRentCount: 366, 
     residentialForSaleCount: 355, 
     commercialForRentCount: 0, 
     commercialForSaleCount: 1, 
     commercialTotalCount: 1, 
     totalProperties: 722, 
     agentCount: 34, 
     licenseLabel: "RERA", 
     licenseNumber: "936", 
     phone: "04 306 9999", 
     links: { 
      self: "/en/broker/espace-real-estate-524", 
      logo: "https://www.propertyfinder.ae/images/pf_broker/logo/2d4dfd5c40d4079dd962adf2fd6277dc3e1e9f2e/desktop", 
      logo2x: "https://www.propertyfinder.ae/images/pf_broker/logo/2d4dfd5c40d4079dd962adf2fd6277dc3e1e9f2e/desktop2x" 
     } 
    }] 
} 
+0

「{}」 – EaBangalore

答えて

0

を達成する方法を教えてくださいすることができ:

jQuery.getJSON() のような何かを示唆しています

html:

<div id='slider'> 

</div> 

JS:データ要素を循環へ

$.getJSON('pathToJsonFile', function(data) { 
    var items = []; 
    $.each(data, function() { 
    var $thisImage = this.links.logo2x, 
     $thisDesc = this.description; 
    items.push("<li ><img src='" + $thisImage + "'/> " + $thisDesc + "</li>"); 
    }); 

    $("<ul/>", { 
    html: items.join("") 
    }).appendTo("#slider"); 
}); 

とそのdivの上で選択した画像のスライダーを呼び出す前に、スライダーのリストにリスト項目としてそれらを追加します。

+0

ロゴ2xに画像リンクがあります。 – wali

+0

画像を編集すると、コンテナjson配列に名前が表示されません。しかし、うまくいけば、この構造/アプローチは基盤として働くことになります。 – Sam0

+0

私は理解できません。外部ファイル – wali

関連する問題