【JS】转换多个json结构的字符串为数组

文章目录

背景:今天遇到接口返回的 EventStream 结构的数据,由于http 流式传输时,可能会分段,所以导致本该每次返回一段json数据结构的字符串,变成了多个json数据结构的字符串拼接在了一起。

  • 例如:
js 复制代码
'{a: 1}{a: 2}{a: 3}'
  • 现在想要得到这种的:
js 复制代码
[{a: 1}, {a: 2}, {a: 3}]
  • 函数实现:支持深层嵌套的json结构
js 复制代码
function parseMultiJson(jsonStr) {
  const jsonArr = [];
  let startIndex = 0;
  let endIndex = 0;
  
  while (startIndex < jsonStr.length) {
    // 找到一个 JSON 对象的开始位置
    startIndex = jsonStr.indexOf('{', startIndex);
    if (startIndex === -1) {
      break;
    }
    
    // 找到一个 JSON 对象的结束位置
    let openBrackets = 1;
    endIndex = startIndex + 1;
    while (openBrackets > 0 && endIndex < jsonStr.length) {
      if (jsonStr[endIndex] === '{') {
        openBrackets++;
      } else if (jsonStr[endIndex] === '}') {
        openBrackets--;
      }
      endIndex++;
    }
    
    // 将该 JSON 对象解析为一个对象,并添加到数组中
    const json = jsonStr.substring(startIndex, endIndex);
    jsonArr.push(JSON.parse(json));
    
    // 更新下一个 JSON 对象的开始位置
    startIndex = endIndex;
  }
  
  return jsonArr;
}
  • 效果:
js 复制代码
const arr = parseMultiJson('{a: 1}{a: 2}{a: 3}')
console.log(arr)	// [{a: 1}, {a: 2}, {a: 3}]
相关推荐
ssshooter5 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
Live000006 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉6 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
球球pick小樱花7 小时前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
喝水的长颈鹿7 小时前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
用户14536981458787 小时前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
codingWhat7 小时前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
码路飞7 小时前
写了个 AI 聊天页面,被 5 种流式格式折腾了一整天 😭
javascript·python
Lee川7 小时前
优雅进化的JavaScript:从ES6+新特性看现代前端开发范式
javascript·面试
颜酱8 小时前
单调队列:滑动窗口极值问题的最优解(通用模板版)
javascript·后端·算法