如何将JSON获取的数据存入变量并输出到网站？

1. 修正getData函数，返回解析后的JSON数据 #

原代码里用response.text()只能拿到字符串格式的JSON，需要改成response.json()直接解析为JS对象，同时让函数返回异步操作的结果：

// 用async/await写法更直观
async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data;
}

// 也可以用then链写法：
// function getData() {
//   return fetch('https://jsonplaceholder.typicode.com/posts')
//     .then(response => response.json());
// }

2. 异步获取数据并传入showData处理 #

fetch是异步操作，不能直接同步赋值变量，必须等待异步操作完成后再调用showData：

// 初始化函数，处理异步逻辑
async function init() {
  const allGoods = await getData();
  showData(allGoods);
}

// 修改showData，接收数据作为参数
function showData(allGoods) {
  let outGoods = '';
  // 注意：jsonplaceholder的posts接口返回的字段是userId、id、title、body，和你代码里的image/name不匹配，实际要换成你接口的真实字段
  allGoods.forEach(item => {
    outGoods += `
      <div class="goods__item">
        <div class="goods__tx">
          <h2>${item.title}</h2>
          <p>${item.body}</p>
          <div class="goods__bottom">
            <b>示例价格 $</b>
            <div class="goods__btn">
              <button class="goods__minus" data-id="${item.id}">-</button>
              <button class="goods__plus" data-id="${item.id}">+</button>
            </div>
          </div>
        </div>
      </div>`;
  });

  const goodsContent = document.querySelector('.goods .container');
  goodsContent.innerHTML = outGoods;
}

// 启动流程
init();

核心注意事项 #

• 异步操作处理：fetch是异步任务，必须用await或then等待结果返回，不能直接同步赋值变量。
• JSON解析：使用response.json()替代response.text()，直接得到可操作的JS对象，避免手动解析JSON字符串。
• 字段匹配：你代码中用到的image/name/desc等字段，需要替换成实际接口返回的字段，否则会出现undefined报错。

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