GraphQL响应提取目标数组 省略data/query外层包裹结构
实现方法
不需要用正则提取内容,GraphQL返回的是标准JSON格式,直接按对象属性取值是最规范、最稳定的实现方式:
- 第一步:在请求成功的回调里,把返回的
xhr.responseText用原生JSON.parse()方法转换成JavaScript对象 - 第二步:直接通过属性访问拿到目标数组,自动跳过外层的
data、currency包装层级 - 可选:如果需要纯id值的一维数组,额外加一次数组映射即可
修改后的核心请求回调代码如下:
xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log(xhr.status); // 增加状态码判断,避免接口报错时执行解析逻辑抛错 if (xhr.status >= 200 && xhr.status < 300) { const res = JSON.parse(xhr.responseText); // 直接获取目标id对象数组 const idObjectArr = res.data.currency; // 此时idObjectArr的值就是 [{id:65223}, {id:2}, {id:1}],可直接当数组使用 console.log('目标对象数组:', idObjectArr); // 如果需要提取纯id值的数组 [65223, 2, 1],加下面这行映射即可 const pureIdArr = idObjectArr.map(item => item.id); console.log('纯id值数组:', pureIdArr); } } };
注意:不要用正则处理结构化JSON数据,一旦接口返回内容出现空格、额外嵌套括号等正常格式变化,正则匹配会直接失效。
JSON.parse是JS原生提供的标准JSON解析方案,性能和稳定性都远高于字符串正则匹配。
内容的提问来源于stack exchange,提问作者cpcdev
相关产品推荐
相关产品推荐

