如何从Axios返回的字符串中提取JSON数组数据？

问题描述 #

通过Axios获取到的响应数据是如下格式的字符串，它由三个独立的JSON数组直接拼接而成，无法直接用JSON.parse()解析：

[{"username": "harry"}][{"id": 1, "name": "playlist1", "tag": "genre"}, {"id": 2, "name": "playlist1", "tag": "genre"}, {"id": 3, "name": "playlist3", "tag": "genre"}][{"1": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}, {"2": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af", "https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}, {"3": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af", "https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}]

需要将三个数组分别提取到变量中，并获取username和第二个数组的内容。

解决方案 #

方法1：字符串修复后整体解析 #

核心思路是把拼接的数组分隔符][替换成,，然后给整个字符串包裹一层[]，将其转化为一个合法的JSON数组：

// 假设responseStr是获取到的原始字符串
const responseStr = '[{"username": "harry"}][{"id": 1, "name": "playlist1", "tag": "genre"}, {"id": 2, "name": "playlist1", "tag": "genre"}, {"id": 3, "name": "playlist3", "tag": "genre"}][{"1": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}, {"2": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af", "https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}, {"3": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af", "https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}]';

// 修复字符串为合法JSON格式
const validJsonStr = `[${responseStr.replace(/\]\[/g, ',')}]`;
const allData = JSON.parse(validJsonStr);

// 提取三个数组
const userData = allData[0];
const playlists = allData[1];
const playlistImages = allData[2];

// 获取username
const username = userData[0].username;

// 使用数据
console.log(username); // 输出 "harry"
console.log(playlists); // 输出第二个数组的内容

方法2：正则匹配拆分每个数组 #

如果不想修改原始字符串结构，可以用正则表达式匹配每个独立的数组片段，再分别解析：

const responseStr = '[{"username": "harry"}][{"id": 1, "name": "playlist1", "tag": "genre"}, {"id": 2, "name": "playlist1", "tag": "genre"}, {"id": 3, "name": "playlist3", "tag": "genre"}][{"1": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}, {"2": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af", "https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}, {"3": ["https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af", "https://i.scdn.co/image/ab67616d0000b273503143a281a3f30268dcd9f9", "https://i.scdn.co/image/ab67616d0000b27369fa55f10c5293bbb985c1af"]}]';

// 匹配所有[]包裹的数组片段
const arrayFragments = responseStr.match(/\[.*?\]/g);

// 分别解析每个片段
const userData = JSON.parse(arrayFragments[0]);
const playlists = JSON.parse(arrayFragments[1]);
const playlistImages = JSON.parse(arrayFragments[2]);

// 获取username
const username = userData[0].username;

// 使用数据
console.log(username);
console.log(playlists);

说明 #

两种方法都能解决问题，方法1更简洁高效，适合大多数场景；方法2拆分更灵活，适合需要单独处理每个片段的场景。

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