如何用JavaScript从JSON字符串提取值至列表项（含Toppings字段）

Hey there! Let's walk through how to tackle both of your questions clearly and practically.

Extracting values from a JSON string and turning them into list items involves three core steps:

• Parse the JSON string into a JavaScript object using JSON.parse() — this lets you access the data like any other JS object.
• Retrieve the target values from the parsed object (this could be an array, a single string, etc.).
• Generate list elements dynamically and append them to your page's list container (like a <ul> or <ol>).

Here's a quick example to illustrate:

// Sample JSON string
const jsonString = '{"books": ["The Hobbit", "1984", "To Kill a Mockingbird"]}';

// Step 1: Parse the JSON
const bookData = JSON.parse(jsonString);

// Step 2: Get the array of books
const books = bookData.books;

// Step 3: Add each book as a list item to the page
const bookList = document.getElementById('book-list'); // Assume this <ul> exists in your HTML
books.forEach(book => {
  const listItem = document.createElement('li');
  listItem.textContent = book;
  bookList.appendChild(listItem);
});

Let's use a realistic example where your JSON includes a Toppings field (common in food-related data like pizza orders).

Case 1: Toppings is an array (most common scenario) #

Suppose your JSON string looks like this:

const pizzaJson = `{
  "pizzaType": "Pepperoni",
  "Toppings": ["Pepperoni", "Mozzarella", "Garlic Oil"],
  "price": 12.99
}`;

Follow these steps:

1. Parse the JSON string:

const pizzaData = JSON.parse(pizzaJson);

2. Extract the Toppings array (remember: JSON keys are case-sensitive, so match Toppings exactly):

const toppings = pizzaData.Toppings;

3. Generate list items and add them to your page:

const toppingsList = document.getElementById('toppings-list'); // Your <ul> container

toppings.forEach(topping => {
  const listItem = document.createElement('li');
  listItem.textContent = topping;
  toppingsList.appendChild(listItem);
});

Case 2: Toppings is a single value #

If Toppings is a single string instead of an array (e.g., {"meal": "Salad", "Toppings": "Croutons"}), adjust the code to create a single list item:

const saladJson = '{"meal": "Salad", "Toppings": "Croutons"}';
const saladData = JSON.parse(saladJson);

const toppingsList = document.getElementById('toppings-list');
const listItem = document.createElement('li');
listItem.textContent = saladData.Toppings;
toppingsList.appendChild(listItem);

Pro Tip: Handle invalid JSON #

Always wrap JSON.parse() in a try-catch block to avoid crashes if the JSON string is malformed:

try {
  const data = JSON.parse(yourJsonString);
  // Your extraction logic here
} catch (error) {
  console.error('Oops! Invalid JSON:', error);
}

内容的提问来源于stack exchange，提问作者Corina