如何使用原生JavaScript遍历JSON字符串提取指定字段并展示

你提供的原始JSON字符串缺少数组外层的[]包裹，不属于合法JSON格式，先做格式兼容修正后，解析为JS数组遍历提取指定字段即可，不需要引入任何第三方库。 #

完整可运行代码 #

<!-- 页面展示容器 -->
<div id="resultBox"></div>

<script>
// 你的原始JSON字符串
const rawStr = `{"index_name":"grafana1","begin":"1970-01-01T00:00:00.000Z","end":"1970-01-01T00:00:00.000Z","calculated_at":"2022-06-01T00:00:04.099Z","took_ms":0},{"index_name":"grafana2","begin":"1970-01-01T00:00:00.000Z","end":"1970-01-01T00:00:00.000Z","calculated_at":"2022-06-02T00:00:05.099Z","took_ms":0}`;

// 兼容处理：自动补全数组外层括号，适配你给出的非标准格式
let validJson = rawStr.trim();
if (!validJson.startsWith('[')) {
  validJson = `[${validJson}]`;
}

// 解析为JS对象数组
const dataList = JSON.parse(validJson);

// 拼接展示内容
let outputText = '';
dataList.forEach(item => {
  // 每个条目只取需要的两个字段，按要求换行，条目之间空一行
  outputText += `${item.index_name}\n${item.calculated_at}\n\n`;
})

// 渲染到页面，pre标签可以直接保留文本换行格式
document.getElementById('resultBox').innerHTML = `<pre>${outputText.trim()}</pre>`;
</script>

实现说明 #

• 遍历采用forEach方法，不会修改原始数据，仅提取index_name和calculated_at两个字段
• 用<pre>标签渲染内容，无需手动拼接<br>标签即可保留换行格式，最终展示效果和你要求的完全一致：

grafana1
2022-06-01T00:00:04.099Z

grafana2
2022-06-02T00:00:05.099Z

• 如果后续接口返回的是标准带[]的JSON数组，兼容逻辑不会产生负面影响，可以直接保留。

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