A guide on extracting data from a JSON string and populating a list in JavaScript

Question

A guide on extracting data from a JSON string and populating a list in JavaScript

Is there a way for me to extract the "Toppings" values from my JSON string and display them as list items? I appreciate any assistance you can provide!

<html>
<body>

<section>
<h2>Toppings</h2>
<ul>
    <li>JSON String Value </li>
    <li>JSON String Value </li>
    <li>JSON String Value </li>
    <li>JSON String Value</li>
</ul>
</section>

     </body>
<script>
var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};
var myJSON = JSON.stringify(myObj);
</script>

</html>

javascript json

Answer 1

Answer №1

Check out this code solution below

try using this snippet

<html>
<body>

<section>
<h2>Toppings</h2>
<ul id="serveJson">
</ul>
</section>

     </body>
<script>
var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};

var toppings = myObj.menu.toppings;

var ul = document.getElementById('serveJson');
for(name in toppings)
{
    var li = document.createElement('li');
    li.appendChild( document.createTextNode(toppings[name]) );
    ul.appendChild(li);
}

</script>

</html>

Answer 2

Check out this code solution below

try using this snippet

<html>
<body>

<section>
<h2>Toppings</h2>
<ul id="serveJson">
</ul>
</section>

     </body>
<script>
var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};

var toppings = myObj.menu.toppings;

var ul = document.getElementById('serveJson');
for(name in toppings)
{
    var li = document.createElement('li');
    li.appendChild( document.createTextNode(toppings[name]) );
    ul.appendChild(li);
}

</script>

</html>

Answer 3

Answer №2

To extract the keys from the Toppings object, use Object.keys method in combination with forEach loop to dynamically create list items and populate an unordered list. Make sure to assign an ID to your ul element:

let toppingsKeys = Object.keys(myObj.menu.toppings);
let ulElement = document.getElementById("yourUlId");

toppingsKeys.forEach(function(key) {
       let liItem = document.createElement("LI");
       let textNode = document.createTextNode(key); 
       liItem.appendChild(textNode);
       ulElement.appendChild(liItem);
});

Answer 4

To extract the keys from the Toppings object, use Object.keys method in combination with forEach loop to dynamically create list items and populate an unordered list. Make sure to assign an ID to your ul element:

let toppingsKeys = Object.keys(myObj.menu.toppings);
let ulElement = document.getElementById("yourUlId");

toppingsKeys.forEach(function(key) {
       let liItem = document.createElement("LI");
       let textNode = document.createTextNode(key); 
       liItem.appendChild(textNode);
       ulElement.appendChild(liItem);
});

Answer 5

Answer №3

If you already have the li defined, you can experiment with this approach:

var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};

var myJSON = Object.keys(myObj.menu.toppings);
var allLI = document.querySelectorAll('ul > li');
allLI.forEach(function(li, i){
  li.textContent = myJSON[i] + ': ' + myObj.menu.toppings[myJSON[i]];
});

<section>
<h2>Toppings</h2>
<ul>
    <li>JSON String Value </li>
    <li>JSON String Value </li>
    <li>JSON String Value </li>
    <li>JSON String Value</li>
</ul>
</section>

Answer 6

If you already have the li defined, you can experiment with this approach:

var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};

var myJSON = Object.keys(myObj.menu.toppings);
var allLI = document.querySelectorAll('ul > li');
allLI.forEach(function(li, i){
  li.textContent = myJSON[i] + ': ' + myObj.menu.toppings[myJSON[i]];
});

<section>
<h2>Toppings</h2>
<ul>
    <li>JSON String Value </li>
    <li>JSON String Value </li>
    <li>JSON String Value </li>
    <li>JSON String Value</li>
</ul>
</section>

Answer 7

Answer №4

Here is a solution I came up with :)

var ul = document.getElementsByTagName('ul')[0];
var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};

Object.keys(myObj.menu.toppings).forEach((key) => {
    var li = document.createElement('li');
    li.innerText = `${key}: ${myObj.menu.toppings[key]}`;
    ul.append(li);
});

And here is the result:

<ul>
    <li>pepperoni: .25</li>
    <li>meatballs: .35</li>
    <li>mushrooms: .40</li>
    <li>olives: .20</li>
</ul>

Answer 8

Here is a solution I came up with :)

var ul = document.getElementsByTagName('ul')[0];
var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};

Object.keys(myObj.menu.toppings).forEach((key) => {
    var li = document.createElement('li');
    li.innerText = `${key}: ${myObj.menu.toppings[key]}`;
    ul.append(li);
});

And here is the result:

<ul>
    <li>pepperoni: .25</li>
    <li>meatballs: .35</li>
    <li>mushrooms: .40</li>
    <li>olives: .20</li>
</ul>

Answer 9

Answer №5

Give this a try

<!DOCTYPE html>
    <html>
    <body>

    <h2>Change a JavaScript object to a JSON string, then transmit it to the server.</h2>

    <script>

    var myObj = {"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms":   ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},     "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};
    var myj=JSON.parse(JSON.stringify(myObj));
    console.log(myj.menu.toppings);


    </script>

    </body>
    </html>

Answer 10

Give this a try

<!DOCTYPE html>
    <html>
    <body>

    <h2>Change a JavaScript object to a JSON string, then transmit it to the server.</h2>

    <script>

    var myObj = {"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms":   ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},     "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};
    var myj=JSON.parse(JSON.stringify(myObj));
    console.log(myj.menu.toppings);


    </script>

    </body>
    </html>

A guide on extracting data from a JSON string and populating a list in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The animated loading image is taking an eternity to actually load

Setting up Django model form using jQuery and JavaScript

Tips on locating information within a pre-existing GET array with parameters provided

Updating existing objects in json using the google-http-java-client

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI

A method that sorts an array of objects based on their properties

Struggling to make the upvoting feature function properly in the Thinkster MEAN Stack Tutorial

Tips for modifying a request api through a select form in a REACT application

Is a String the data type of a list when passed to the Controller from GSP?

Load the Google Maps JavaScript file only when it is required

The index appears multiple times when navigating through the prev/next pagination

Loading the Facebook JavaScript SDK asynchronously using React and Redux

Would this code effectively disable the right-clicking menu for MathJax?

Using double quotation marks in Node.js to enclose variables

Is the background color change function with AJAX not functioning properly when using array values?

dynamically filter a set of string elements

Scala Play - Efficient strategy for transferring large data using HTTP requests

What are the advantages of using the CRUD coding style with Redux?

Struggling with accessing specific data from JSON response when using Alamofire in Swift

What is the best way to transform an Array into Json format using Java?