Loading Please Wait...
JSON can very easily be translated into JavaScript.
JavaScript can be used to make HTML in your web pages.
let jsonData = '[{"name":"INDIANRED","hex":"#CD5C5C","rgb":"RGB(205, 92, 92)"},{"name":"LIGHTCORAL","hex":"#F08080","rgb":"RGB(240, 128, 128)"}]';
const dataObj = JSON.parse(jsonData);
Make an HTML table with data received as JSON.
<html>
<body>
<div id="container"></div>
<script>
const colors = JSON.parse(jsonData); // From first example
let text = `<table border="1">
<tr>
<th>Name</th>
<th>HEX</th>
<th>RGB</th>
</tr>
`;
for (let x in colors) {
text += `
<tr>
<td>${colors[x].name}</td>
<td>${colors[x].hex}&</td>
<td>${colors[x].rgb}&</td>
</tr>
`;
}
document.getElementById('container').innerHTML = text;
</script>
</body>
</html>
Make an HTML list with data received as JSON.
<html>
<body>
<div id="container"></div>
<script>
const colors = JSON.parse(jsonData); // From first example
let text = "";
for (let x in colors) {
text += `<li>${colors[x].name} - ${colors[x].hex} - ${colors[x].rgb}</li>`;
}
document.getElementById('container').innerHTML = text;
</script>
</body>
</html>
Make an HTML <select> (dropdown) list with data received as JSON.
<html>
<body>
<div id="container"></div>
<script>
const colors = JSON.parse(jsonData); // From first example
let text = "<select>";
for (let x in colors) {
text += `<option>${colors[x].name} - ${colors[x].hex}</option>`;
}
text += "</select>";
document.getElementById('container').innerHTML = text;
</script>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved