JavaScriptを使用してJSONデータをHTMLページに表示

Question

JSONに最初に公開されているので、私は専門用語なしで5になっているように説明してください。 私はこのようなJSONファイルを与えられており、これらの項目をHTMLのリストに表示する必要があります。 多くの例では、JSONオブジェクトが変数に割り当てられています。これは変数に割り当てられていないため、参照する方法がわかりません。 プロダクトリストのすべてにアクセスして表示するにはどうすればいいですか？ 私のHTMLでは、script.jsファイルとこのjsonファイルにリンクしています。

HTML

<h1>My Cart</h1> 
    <div id="cart"> 
     <h2>Cart Items</h2> 
     <ul id="cartItemsList"> 
     </ul> 
    </div> 

JSON

"basket": { 
     "productList": [{ 
      "product": { 
       "id": "111", 
       "name": "Dog", 
       "shortDescription": "<p>Mans best friend</p>", 
       }, 
       "category": "Canine", 
       "availability": "In Stock", 
       "variationType": { 
        "name": "Breed", 
        "value": "Collie" 
       } 
      }, 
      "quantity": 1, 
      "price": "$53.00" 
     }, { 
      "product": { 
       "id": "112", 
       "name": "Dog", 
       "shortDescription": "<p>Not so best friend</p>", 
       "category": "feline", 
       "availability": "Low In Stock", 
       "variationType": { 
        "name": "breed", 
        "value": "Maine Coon" 
       } 
      }, 
      "quantity": 1, 
      "price": "$49.00" 
     }, { 
      "product": { 
       "id": "113", 
       "name": "Rabbit", 
       "shortDescription": "Likes carrots", 
       "category": "cuniculus", 
       "availability": "In Stock" 
      }, 
      "quantity": 1, 
      "price": "$66.00" 
     }] 
    } 

はJavaScript

var products = document.getElementById("cartItemsList"); 
    cartItemsList.innerHTML = "<li>" + product + "</li>"; 

Answer 1

まず、あなたは急性のjsオブジェクトに長い文字列からjsonを変換する必要があります。 JSON.parseコマンドを使用しています。そのよう：

let jsObj = JSON.parse(youreJsonString); 

ゼム、あなたはループそうのように、あなたのproductListでyoureの製品を投げると、あなたのhtmlコードをビルドすることができます。

var products = document.getElementById("cartItemsList"); 

jsObj.basket.productList.forEach(function(product) { 
     cartItemsList.innerHTML = "<li>" + product.name + " : " + product.price+ " </li>"; 
}); 

Answer 2

あなたは、外部JSONを読み込むためにAjax呼び出しまたは類似のものを使用しない限り、あなたが提供したJSONを、変数として参照できるオブジェクトに変換する必要があります。また、あなたのJSONは無効です。私はここでそれを修正しようとしましたが、objという変数を使って参照できるオブジェクトとしてJSONを参照します。ここに実用的なコードスニペットがあります。

var obj = { 
 
"basket": { 
 
\t \t "productList": [{ 
 
\t \t \t "product": { 
 
\t \t \t \t "id": "111", 
 
\t \t \t \t "name": "Dog", 
 
\t \t \t \t "shortDescription": "<p>Mans best friend</p>", 
 
\t \t \t \t "category": "Canine", 
 
\t \t \t \t "availability": "In Stock", 
 
\t \t \t \t "variationType": { 
 
\t \t \t \t \t "name": "Breed", 
 
\t \t \t \t \t "value": "Collie" 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t "quantity": 1, 
 
\t \t \t "price": "$53.00" 
 
\t \t }, { 
 
\t \t \t "product": { 
 
\t \t \t \t "id": "112", 
 
\t \t \t \t "name": "Dog", 
 
\t \t \t \t "shortDescription": "<p>Not so best friend</p>", 
 
\t \t \t \t "category": "feline", 
 
\t \t \t \t "availability": "Low In Stock", 
 
\t \t \t \t "variationType": { 
 
\t \t \t \t \t "name": "breed", 
 
\t \t \t \t \t "value": "Maine Coon" 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t "quantity": 1, 
 
\t \t \t "price": "$49.00" 
 
\t \t }, { 
 
\t \t \t "product": { 
 
\t \t \t \t "id": "113", 
 
\t \t \t \t "name": "Rabbit", 
 
\t \t \t \t "shortDescription": "Likes carrots", 
 
\t \t \t \t "category": "cuniculus", 
 
\t \t \t \t "availability": "In Stock" 
 
\t \t \t }, 
 
\t \t \t "quantity": 1, 
 
\t \t \t "price": "$66.00" 
 
\t \t }] 
 
\t } 
 
} 
 

 
var cartItemsList = document.getElementById("cartItemsList"); 
 

 
obj.basket.productList.forEach(function(element) { 
 
     cartItemsList.insertAdjacentHTML('beforeend',"<li>" + element.product.name + " : " + element.price+ " </li>"); 
 
});

<h1>My Cart</h1> 
 
    <div id="cart"> 
 
     <h2>Cart Items</h2> 
 
     <ul id="cartItemsList"> 
 
     </ul> 
 
    </div>

Answer 3

外部ファイルからこれをロードしている場合、あなたは、Ajaxやコールの同様のタイプが必要になります。 Ajaxを使用するには、プロジェクトのHTMLファイルにjQueryというライブラリを追加する必要があります。その後、次の作業コードスニペットに示すように、JSONをjavascript変数として参照することなくJSONを呼び出すことができます。

/* I put your JSON into an external file, loaded from github */ 
 
var url = "https://raw.githubusercontent.com/mspanish/playground/master/jessica.json"; 
 

 
/* this tells the page to wait until jQuery has loaded, so you can use the Ajax call */ 
 

 
$(document).ready(function(){ 
 
    $.ajax({ 
 
    url: url, 
 
    dataType: 'json', 
 
     error: function(){ 
 
     console.log('JSON FAILED for data'); 
 
     }, 
 
    success:function(results){ 
 
    /* the results is your json, you can reference the elements directly by using it here, without creating any additional variables */ 
 
    
 
     var cartItemsList = document.getElementById("cartItemsList"); 
 

 
     results.basket.productList.forEach(function(element) { 
 
     cartItemsList.insertAdjacentHTML('beforeend',"<li>" +    element.product.name + " : " + element.price+ " </li>"); 
 
     }); // end of forEach 
 
    } // end of success fn 
 
    }) // end of Ajax call 
 
}) // end of $(document).ready() function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1>My Cart</h1> 
 
<div id="cart"> 
 
    <h2>Cart Items</h2> 
 
    <ul id="cartItemsList"> 
 
    </ul> 
 
</div>