Anzeige der JSON-Daten zu HTML-Seite mit JavaScript

Wenn Sie laden diese aus einer externen Datei, müssen Sie die Ajax-oder eine ähnliche Art des Anrufs. Zu Ajax verwenden, müssen Sie eine Bibliothek namens jQuery zu Ihrem Projekt HTML-Datei. Dann rufen Sie Ihre JSON, ohne Bezug auf Sie es als eine javascript-variable wie Sie sehen in den folgenden funktionierenden code-snippet.

JS:

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

HTML:

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

Es sei denn, Sie verwenden einen Ajax-call oder ähnliches zu laden, externe JSON, müssen Sie zum konvertieren von JSON-Sie haben in ein Objekt, das Sie referenzieren können, die als eine variable. Auch Ihre JSON ist nicht gültig. Ich habe versucht, korrigieren Sie es hier, und werde mich dann verweisen Sie Ihre JSON-Objekt als ein Objekt können Sie die Referenz über eine variable namens obj. Hier ist ein funktionierendes code-snippet.

JS:

var obj = { 
"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"
		}]
	}
}

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

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

HTML:

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