如何使用JavaScript將JSON字符串中的值提取到列表項中

Question

如何將JSON字符串中的“ Toppings”值拉入列表項？ 謝謝你的幫助！

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

Answer 1

這是您的代碼解決方案

use this code

<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

使用Object.Keys來獲取Toppings的鍵，然后使用forEach對其進行迭代，然后使用如下列表項填充未鏈接的列表，這是假設您為ul節點提供了id屬性：

let myToppings = Object.Keys(myObj.menu.toppings);
let myUl = document.getElementById("yourUlId");

myToppings.forEach(function(key) {
       let liItem = document.createElement("LI");
       let textnode = document.createTextNode(key); 
       liItem.appendChild(textnode);
       myUl.appendChild(liItem);
});

Answer 3

假設您已經定義了li 。 然后，您可以嘗試以下方式：

 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 4

我的解決方案:)

var ul = document.getElementsByTagName('ul')[0]; //Get the <ul> to append toppings
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) => { //for each topping create a new li and append to the ul
    var li = document.createElement('li');
    li.innerText = `${key}: ${myObj.menu.toppings[key]}`;
    ul.append(li);
});

結果：

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

Answer 5

嘗試這個

<!DOCTYPE html>
    <html>
    <body>

    <h2>Convert a JavaScript object into a JSON string, and send 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>

如何使用JavaScript將JSON字符串中的值提取到列表項中

問題描述

5 個解決方案

解決方案1
1 2018-03-06 15:36:46

解決方案2
1 2018-03-06 15:43:21

解決方案3
1 2018-03-06 15:56:26

解決方案4
1 2018-03-06 16:30:37

解決方案5
0

如何使用JavaScript將JSON字符串中的值提取到列表項中

問題描述

5 個解決方案

解決方案1 1 2018-03-06 15:36:46

解決方案2 1 2018-03-06 15:43:21

解決方案3 1 2018-03-06 15:56:26

解決方案4 1 2018-03-06 16:30:37

解決方案5 0

解決方案1
1 2018-03-06 15:36:46

解決方案2
1 2018-03-06 15:43:21

解決方案3
1 2018-03-06 15:56:26

解決方案4
1 2018-03-06 16:30:37

解決方案5
0