HTML/Ajax - データを動的に表示する

Question

私は、JSONファイルからデータを読み込んでそれを画面に関連情報とともに表示するプロジェクトの電子商取引サイトを作成しています。私はHTML文書にファイルをリンクすることができ、コンソールを使用して、製品名などの情報をリストすることができました。私の質問は、どのように私はこの情報をウェブサイトに入れ、製品ごとに新しいコンテナをつくるのですか？

これらの製品を表示する方法のレイアウトを作成しました。いくつかのダミーデータが含まれ、いくつかのCSSが作成されています。誰かがJSONファイル内にリストされているすべての製品の新しいショッピングコンテナを作成する方法を説明できますか？JSONファイル内のすべての製品は、次のスクリーンショットに示すように作成されます。

スクリプト&本部レイアウト：

<section class="section-offer js--section-offer" id="offer"> 
     <div class="row"> 
      <h2>What We Offer.</h2> 
      <p class="long-copy"> 
      </p> 
      <script> 
       $.ajax({ 
        url: 'products.json', 
        dataType: 'json', 
        type: 'get', 
        cache: false, 
        success: function(data) { 
         $(data.products).each(function(index,value) { //Grabs every single item inside of the json file 
          console.log(value.name); 
         }); 
        } 
       }); 
      </script> 
     </div> 
     <div class="shopping-container"> 
      <div> 
       <h4>Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - UK-Layout</h4> 
       <p class="shopping-container-desc">Logitech 920-008017 G910 Orion Spectrum RGB Mechanical Gaming Keyboard - Black.</p> 
      </div> 
      <div class="shopping-container-img"> 
       <img src="images/02.jpg"> 
      </div> 
      <div> 
       <a href="basket.html" class="btn btn-full">&pound;199.99</a> 
      </div> 
     </div> 
    </section> 

JSONファイルのレイアウト

{ 
    "products" : [ 
    { 
     "id" : "0", 
     "name" : "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - UK-Layout", 
     "price" : "119.99", 
     "category" : "0", 
     "description" : "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical Gaming Keyboard - Black.", 
     "images" : [ 
     { 
      "id" : "0", 
      "src" : "images/00.jpg" 
     }, 
     { 
      "id" : "1", 
      "src" : "images/01.jpg" 
     }, 
     { 
      "id" : "2", 
      "src" : "images/02.jpg" 
     } 
     ] 
    }, 

Answer 1

などKnockout、AngularまたはReactなどのツールを調査してみてください。すべての機能は、あなたが望むような機能を備えています。すべて（メモリが提供されている場合）は、コンポーネントの概念を提供します。これにより、HTMLの一部を複製できますが、その中にはさまざまなデータが表示されます。すなわち、ここであなたが望むもの。