You have to use JavaScript to Display JSON data on the HTML page. First, convert the json from a long string to an acutely js object. you doing so by the JSON.parse command. like so:
let jsObj = JSON.parse(youreJsonString);Then, you can loop throw your products in your product list and build your html code, like so:
var cartItemsList = document.getElementById("cartItemsList");
obj.basket.productList.forEach(function(element) {
cartItemsList.insertAdjacentHTML( 'beforeend',"<li>" + element.product.name + " : " + element.price+ " </li>");
});Source: stackoverflow.com
Display JSON data on an HTML page
Simple HTML example code of shopping cart, where access and display everything in the product list.
<!DOCTYPE html>
<html>
<body>
<h2>Cart Items</h2>
<ul id="cartItemsList">
<script>
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>");
});
</script>
</body>
</html> Output:
How to display JSON data in a div when JSON data is in an Array?
Answer: You can use for it to loop thru the array and construct an HTML string. Use jQuery‘s .append() to add the string to the body.
Another option is using map to loop thru the array and use Template literals to construct the HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.div-conatiner {
background-color: #eeeeee;
margin-bottom: 5px;
padding: 5px;
}
.div-conatiner p {
margin: 0px;
}
</style>
</head>
<body>
<script>
var data = [{
"name": "Rehan",
"location": "Pune",
"description": "hello hi",
"created_by": 13692,
"users_name": "xyz",
},
{
"name": "Sameer",
"location": "Bangalore",
"description": "how are you",
"created_by": 13543,
"users_name": "abc",
},
]
var htmlText = data.map(function(o){
return `
<div class="div-conatiner">
<p class="p-name"> Name: ${o.name}</p>
<p class="p-loc"> Location: ${o.location}</p>
<p class="p-desc"> Description: ${o.description}</p>
<p class="p-created"> Created by: ${o.created_by}</p>
<p class="p-uname"> Username: ${o.users_name}</p>
</div>
`;
});
$('body').append(htmlText);
</script>
</body>
</html> Output:
Do comment if you have any doubts or suggestions on this JS JSON topic.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version