如何在HTML div展示JSON响应及解析渲染餐厅JSON字段

嘿，我来帮你理清这两个前端常见需求的解决方案：

这个得看你想要的展示效果，分两种核心场景：

场景1：展示格式化、可读性强的原始JSON #

如果只是想让用户看到结构清晰的JSON代码，最优方案是结合<pre>+<code>标签，配合JSON.stringify()的格式化参数。这种方式既保留了JSON的层级结构，还自带等宽字体，可读性拉满。

示例代码：

<div id="json-display"></div>

<script>
  // 假设这是你拿到的JSON响应数据
  const jsonData = { restaurant_name: 'R_name', address: { longitude: -121.483693, city: 'City Name', zip: '00000', latitude: 37.328255, state: 'ZZ', street_address: 'Street Address' }, menu_data: ['Zereshk', 'Khoreshe Ghorm-E-Sabszi with Beef'] };

  const displayDiv = document.getElementById('json-display');
  // 用JSON.stringify的第三个参数设置缩进（这里是2个空格）
  const formattedJson = JSON.stringify(jsonData, null, 2);
  // 把格式化后的JSON放到pre+code里，再插入div
  displayDiv.innerHTML = `<pre><code>${formattedJson}</code></pre>`;
</script>

如果需要语法高亮，还可以给<code>加个类（比如class="language-json"），配合轻量高亮库，但如果只是基础需求，上面的代码完全够用。

场景2：把JSON渲染成结构化的HTML内容 #

如果要把JSON字段转换成用户友好的UI（比如卡片、列表），最优方式是先解析JSON，再动态生成DOM元素插入div。这种方式更适合普通用户浏览，而非查看原始代码。

针对你提供的餐厅JSON结构，最简方案是用浏览器原生的fetch API获取数据，解析后用模板字符串快速生成HTML结构，再插入页面。这种写法简洁易懂，代码量极少。

示例代码：

<div id="restaurants-container"></div>

<script>
  const restaurantsContainer = document.getElementById('restaurants-container');
  // 替换成你的实际API URL
  const apiUrl = '你的餐厅数据接口地址';

  fetch(apiUrl)
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(restaurants => {
      // 遍历每个餐厅，生成卡片HTML
      const restaurantsHtml = restaurants.map(restaurant => `
        <div class="restaurant-card" style="border:1px solid #eee; padding:1rem; margin:1rem 0; border-radius:8px;">
          <h3>${restaurant.restaurant_name}</h3>
          <div class="address">
            <p>地址：${restaurant.address.street_address}, ${restaurant.address.city}, ${restaurant.address.state} ${restaurant.address.zip}</p>
            <p>坐标：${restaurant.address.latitude}, ${restaurant.address.longitude}</p>
          </div>
          <div class="menu">
            <h4>菜单：</h4>
            <ul>
              ${restaurant.menu_data.map(item => `<li>${item}</li>`).join('')}
            </ul>
          </div>
        </div>
      `).join('');

      // 把生成的HTML插入容器
      restaurantsContainer.innerHTML = restaurantsHtml;
    })
    .catch(error => {
      restaurantsContainer.innerHTML = `<p>加载餐厅数据失败：${error.message}</p>`;
    });
</script>

小提示： #

• fetch是浏览器原生API，比传统的XMLHttpRequest简洁太多，无需额外依赖
• 模板字符串可以直接嵌入变量和循环，不用拼接一堆零散字符串，可读性极强
• 示例里加了简单的内联样式，你可以根据需求换成外部CSS优化样式
• 注意你提供的示例JSON里latitude值写成了317.328255，这超出了纬度的合法范围（-90到90），实际开发中要留意数据合法性哦~

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