前端将Json字符串转换为数组，用for循环取出每一条，并构建网页元素显示。

该回答采用文心一言


<!-- HTML部分 -->  
<div id="data-container"></div>

<!-- JS部分 -->  
// 假设我们有一个Json字符串  
const jsonString = '[{"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}, {"name": "Charlie", "age": 35}]';  
  
// 将Json字符串转换为数组  
const dataArray = JSON.parse(jsonString);  
  
// 创建一个空的div元素，用于显示数据  
const dataContainer = document.getElementById("data-container");  
  
// 遍历数组，为每条数据构建网页元素，并将它们添加到DOM中  
for (let i = 0; i < dataArray.length; i++) {  
  const item = dataArray[i];  
  const name = item.name;  
  const age = item.age;  
  const div = document.createElement("div"); // 创建一个div元素  
  div.innerHTML = `Name: ${name}, Age: ${age}`; // 设置div的innerHTML  
  dataContainer.appendChild(div); // 将div添加到DOM中  
}

使用 JSON.parse转换一下就可以，再循环获取数据展示

const data = JSON.parse(jsonString);
for (let i = 0; i < data.length; i++) {
  const item = data[i];
  const code = item.code;
  const name = item.name;
  const container = document.getElementById('container');
  const div = document.createElement('div');
  div.innerHTML = `学号：${code}，姓名：${name}`;
  container.appendChild(div);
}

仔细看图片；图片上面的就是接口返回的json数据以及如何构建的html

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7515662
你也可以参考下这篇文章：后端传递json数据给前端，出现数据丢失问题。
除此之外, 这篇博客: 爬虫爬取京东商品详细数据（品牌、售价、各类评论量（精确数量）、热评词及数量等）json解析部分数据中的 1、分析网页源码，确定提取方式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

1>.商品名称（product_name）、品牌（product_brand）
在这里插入图片描述
解析方式：xpth：

[product_name] = detail.xpath('//*[@id="detail"]/div[2]/div[1]/div[1]/ul[2]/li[1]/@title')  # 商品名称
print("商品：" + str(product_name))

[product_brand] = detail.xpath('//*[@id="detail"]/div[2]/div[1]/div[1]/ul[1]/li[1]/a/text()')   # 商品品牌
print("品牌：" + str(product_brand))

2>.其他数据
这些数据保存存在反爬措施，其数据保存在json中，提取方法：（请求json）
京东反爬措施导致无法爬取商品价格和评论等信息解决方法

最高价格（product_m_price）、当前价格（product_price）、指导价格（product_o_price）：

p = requests.get('https:' + '//p.3.cn/prices/mgets?skuIds=J_' + product_id, headers=header, proxies=random.choice(proxy_list))  # 请求商品价格jso
[product_dict] = json.loads(p.text)     # 获取商品价格
product_m_price = product_dict['m']
product_price = product_dict['p']
product_o_price = product_dict['op']

总评论数（total_comment_num）、好评数（good_comment_num）、好评率(good_percent_com)、差评数(bad_comment_num)、差评率(bad_percent_com)：

c = requests.get('https://club.jd.com/comment/productCommentSummaries.action?referenceIds=' + product_id, headers=header, proxies=random.choice(proxy_list))     # 请求评论json
comment_dict = json.loads(c.text.split('[')[-1].split(']')[0])  # json内容截取

total_comment_num = comment_dict['CommentCount']
good_comment_num = comment_dict['ShowCount']
good_percent_com = comment_dict['GoodRate']
bad_comment_num = comment_dict['PoorCount']
bad_percent_com = comment_dict['PoorRate']


print("总评论数为：{}" .format(total_comment_num))
print("好评数: {}" .format(good_comment_num))
print("好评率: {}" .format(good_percent_com))
print("差评数: {}".format(bad_comment_num))
print("差评率: {}".format(bad_percent_com))

评论标签及数量(dict_icon)：

icon = requests.get('https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=' + product_id + '&score=0&sortType=5&page=0&pageSize=10', headers=header, proxies=random.choice(proxy_list))
    comment_ic = json.loads(icon.text.split('hotCommentTagStatistics":')[-1].split(',"jwotestProduct')[0])
    

icon = []    
for ic in comment_ic:
    comment_ic_name = ic['name']
    comment_ic_num = ic['count']
    comment_icon = comment_ic_name + '(' + str(comment_ic_num) + ')'
    icon.append(comment_icon)
 	comment_icon_all = ','.join(icon)
 print(comment_icon_all)

您还可以看一下刘高联老师的亲自动手写一个深度学习框架课程中的代码实践：利用json定义网络结构小节, 巩固相关知识点