如何解析含多个JSON对象的流并提取全部title生成汇总列表

问题原因 #

你的数据源是多个JSON对象直接用逗号拼接的结构，不属于标准JSON格式：

• 标准JSON要么是单个对象、字符串、数字等基础值，要么是用[]包裹的JSON数组
• JSON.parse()只能接收合法的单个JSON串，直接传入多个对象拼接的内容会直接抛出语法错误，自然无法继续提取字段

解决方案 #

方案1：字符串转标准JSON数组（适配一次性拿到全量字符串的场景） #

只需要给拼接的JSON串前后补上[和]，就可以转成标准JSON数组解析，之后遍历提取所有title即可，完整代码如下：

<!DOCTYPE html>
<html>
<body>
<p id="demo2"></p>
<script>
const data = 
'{"published_at":"2018-07-01","title":"Lorem & ipsum dolor sit amet, consectetur adipiscing elit","_kw":[]},{"published_at":"2019-07-02","title":"Vestibulum in arcu neque. Pellentesque feugiat, mauris at congue semper. ","_kw":[]},{"published_at":"2017-07-03","title":"Nulla iaculis, massa sit amet tempor pellentesque, sem ligula euismod metus, eget blandit tortor arcu eu nisl","_kw":[]},{"published_at":"2018-06-01","title":"Pellentesque non feugiat ante. Donec dignissim turpis id orci consectetur. ","_kw":[]},{"published_at":"2014-09-02","title":"Aliquam convallis turpis urna, ut dapibus arcu faucibus interdum","_kw":[]},{"published_at":"2017-12-03","title":"Duis id elit eu metus commodo volutpat at at velit. ","_kw":[]},{"published_at":"2018-01-01","title":"Aliquam tristique dui turpis, nec facilisis tellus eleifend id. Morbi. ","_kw":[]},{"published_at":"2019-05-02","title":"Nam arcu mauris, porttitor ut leo id, luctus malesuada orci. ","_kw":[]},{"published_at":"2017-07-03","title":"Donec ut mi bibendum, pharetra dolor sed, dapibus mauris. In. ","_kw":[]},{"published_at":"2015-01-01","title":"Morbi enim metus, mollis in ultrices molestie, sagittis quis elit. ","_kw":[]},{"published_at":"2017-02-02","title":"Curabitur vestibulum lorem in ex semper iaculis. Mauris vel facilisis. ","_kw":[]},{"published_at":"2015-03-22","title":"Donec interdum nibh blandit bibendum hendrerit. Lorem ipsum dolor sit. ","_kw":[]},{"published_at":"2016-06-19","title":"Etiam ac tellus quis felis cursus vulputate. Maecenas at felis. ","_kw":[]},{"published_at":"2019-04-30","title":"Integer mi sapien, pharetra at nunc vel, tristique sollicitudin augue. ","_kw":[]}';
// 转成标准JSON数组
const arr = JSON.parse(`[${data}]`);
// 提取所有title
const titleList = arr.map(item => item.title);
// 渲染到页面，此处用换行分隔，可根据需求调整展示格式
document.getElementById("demo2").innerHTML = titleList.join('<br>');
</script>
</body>
</html>

方案2：流式JSON解析（适配持续推送的流式加载场景） #

如果你的数据是实时推送的流（不需要等全量数据返回），可以用浏览器内置的TextDecoder配合流式JSON解析逻辑逐块处理，边接收数据边提取title字段。

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