前端多重嵌套的json数据格式解析

简介: 解决方法1.解析数据格式 ,这里需要注意的是return,要把次条数据格式放在获取api接口的最后一项,否则不会执行 循环只返回return所返回的值,并不会执行下面的值

👦个人简介:张清悠,字澄澈,号寻梦客,爱好旅行、运动,主攻前端方向技术研发,副攻Unity 3D、C++、Python人工智能等
📝个人寄语:学会不为过程的缓慢而焦虑,即使暂时未能如你所愿,但只要你在努力,你就在不断成长!
🙏个人公众号:清悠小猿(海量源码尽在其中,欢迎关注)

1.先上数据格式看看,这数据格式让我花费了近一上午才解决的

1.这是控制台带你出来的数据格式

applicableFormatsQt: "[{\"storeCode\":\"012002\",\
"storeName\":\"购物商场\",\
"dedicatedSiteFee\":\"4254.90\"}]"

2.这是复制过来的数据格式

"[{
   
   
"storeCode":"012002",
"storeName":"购物商场",
"dedicatedSiteFee":"4254.90"
}]"

3.控制台打印的多了很多 "\\" 都是json的格式

解决方法

1.解析数据格式 ,这里需要注意的是return,要把次条数据格式放在获取api接口的最后一项,否则不会执行 循环只返回return所返回的值,并不会执行下面的值



//这里that.salesIncentive_tableData1是数组
that.salesIncentive_tableData1=JSON.parse(response.data.data.salesIncentive)//先将字符串转换成json格式
 var newArr = []; //声明空数组
 var json = []  // 声明空数组
 for(var i  in that.salesIncentive_tableData1 ){
   
   
 newArr[that.salesIncentive_tableData1[i]]  = json[i]
    }
    //循环遍历获取
   return newArr

2.进行赋值进行渲染
在这里插入图片描述
3.效果如下
在这里插入图片描述

  1. 拿到数据的其中一项列如:拿数据的“storeName”
  var applicableFormats_other =JSON.parse(response.data.data.applicableFormatsQt)//解析数据格式
  var newArr = [];  //声明空数组
 for (let otherIndex = 0; otherIndex < applicableFormats_other.length; otherIndex++) {
   
   
  const element = applicableFormats_other[otherIndex];
    newArr.push(element.storeName);  //拿到我们数据里面的门店名字
    }
    //循环遍历
 that.ruleForm.applicableFormats_other=newArr.join(",");  //用逗号分割

综上就是解析多重数据格式的全部内容,希望对你有所帮助

目录
相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
1282 0
|
Web App开发 前端开发 JavaScript
前端性能优化利器:图片懒加载实战解析
前端性能优化利器:图片懒加载实战解析
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
4372 64
|
存储 前端开发 JavaScript
|
JSON 前端开发 安全
前端开发中常用的鉴权方式解析与实践要点
本文深入探讨了前端开发中常用的鉴权方式,包括HTTP基本鉴权、Session-Cookie鉴权、Token验证、JWT(JSON Web Tokens)、单点登录(SSO)和OAuth等。文章首先明确了认证、授权、鉴权和权限控制的概念及关系,随后详细解析每种鉴权方式的工作原理、优缺点及适用场景。例如,HTTP基本鉴权简单但安全性低,适合内部网络;Session-Cookie鉴权易受CSRF攻击,适用于同域Web应用;Token和JWT无状态且扩展性好,适合分布式系统;SSO提升用户体验,适用于多系统统一登录;OAuth安全方便,适合第三方授权接入。
1523 2
|
人工智能 JSON 前端开发
如何解决后端Agent和前端UI之间的交互问题?——解析AG-UI协议的神奇作用
三桥君指出AG-UI协议通过SSE技术实现智能体与前端UI的标准化交互,解决流式传输、实时进度显示、数据同步等开发痛点。其核心功能包括结构化事件流、多Agent任务交接和用户中断处理,具有"一次开发到处兼容"、"UI灵活可扩展"等优势。智能体专家三桥君认为协议将AI应用从聊天工具升级为实用软件,适用于代码生成、多步骤工作流等场景,显著提升开发效率和用户体验。
2774 0
|
数据采集 JSON 数据可视化
JSON数据解析实战:从嵌套结构到结构化表格
在信息爆炸的时代,从杂乱数据中提取精准知识图谱是数据侦探的挑战。本文以Google Scholar为例,解析嵌套JSON数据,提取文献信息并转换为结构化表格,通过Graphviz制作技术关系图谱,揭示文献间的隐秘联系。代码涵盖代理IP、请求头设置、JSON解析及可视化,提供完整实战案例。
915 4
JSON数据解析实战:从嵌套结构到结构化表格
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
1048 37
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
2666 12
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
765 12

推荐镜像

更多
  • DNS