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 个答案: