如何使用map和Object.assign把数据转成自己想要的格式

已于 2022-11-27 19:59:59 修改
阅读量427 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json list 前端
于 2022-11-27 19:57:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_47599989/article/details/128067658
本文讲述了如何将后端返回的复杂数据结构转化为前端所需的JSON数组格式，并以HTML和JavaScript实现动态渲染。涉及接口参数传递、数据处理示例和关键步骤解析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

图1是后端给我返回的数据结构

图2是html部分

图3是js部分，我想要的数据格式如下，并根据这种数据格式进行渲染

现在开始处理数据，把拿到的数据转成我想要的数据格式，我在拿数据之前需要在地址栏传参，并且传参是通过接口传递，所以直接把数据拼接到接口后面，这里只截图了name和obj1的数据处理，其余的obj2-4都和obj1一样，现在name以及obj1-4都是一个个单独的json。

把以上单独的json放进数组

 

ES6之Object.assign()详解及注意事项
_夜渐凉
09-19 5723
 Object.assign源码： interface ObjectConstructor { /** * Copy the values of all of the enumerable own properties from one or more source objects to a * target object. Returns the target o...
map()方法和Object.assign()方法
qq_40238532的博客
11-26 1217
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 例子： var array= [1,4,9,16]; const map= array.map(x => x *3); console.log(map) 例子： const object1 = { a: 1, b: 2, c: 3 }; c...
Object.assign
全栈科学家的博客
12-02 592
实际项目当中有需要对对象重置数据，添加数据，修改数据的需求，此时object.assign未必不是一个你值得想到的方法.
深入解析JavaScript中的Object.assign()方法
最新发布
2401_85392853的博客
06-11 1151
AI 生成代码的时代，你会看到一些由 AI 生成的逻辑。其中之一就是。如果你也遇到过这个方法，但不知道它的含义，本文旨在详细解释它。让我们深入探讨。在现代 JavaScript 中，有一些方法在幕后默默承担着繁重的工作。其中之一就是。虽然它可能没有新语法或框架那样引人注目，但它在对数据操作、状态管理和对象组合中发挥着关键作用。请注意对象组合这一点。读完本文后，你应该了解是什么、它是如何工作的、它的用途以及如果不小心使用它可能会带来的问题。
Object.assign()用法讲解
cxu123321的博客
01-14 1764
Object.assign()用法讲解 Calla_Lj 最后发布于2019-04-23 18:54:32 语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 const target = { a: 1, b: 2 }; const source...
ES6：Object.assign方法详解
DZQ1223的博客
07-24 5354
首先了解下Object.assign()是什么。我们先看看ES6官方文档是怎么介绍的？Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。注意：Object.assign() 方法至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
elementui的tree树形控件获取所有选中的节点
u012746918的博客
05-26 4693
<el-tree :props="defaultParams" ref="tree" :data="treedata" show-checkbox node-key="id" @check-change="handleCheckChange"> </el-tree> defaultParams: { ...
map 中使用object.assign()的用法
04-29
Map 是一种 JavaScript 数据结构，它可以将键值对进行存储和访问。Object.assign() 是一个用于对象合并的方法，它可以将多个对象合并成一个对象。 在 Map 中使用 Object.assign() 方法有两个主要目的。首先，它可以...
js代码-Object.keys()和Object.values()的简单用法。
07-16
- **遍历对象**：由于`Object.keys()`和`Object.values()`返回的是数组，因此可以配合数组方法如`map()`、`forEach()`等进行对象的遍历操作。 - **复制对象**：在浅拷贝对象时，这两个方法可以派上用场。例如，使用`...
Object.assign代码解析
05-28
现在想深入理解Object.assign在这里的作用以及如何正确应用。首先，我需要回顾一下Object.assign的基本功能。它用于将所有可枚举的自有属性从一个或多个源对象复制到目标对象，返回目标对象。这在合并对象属性时非常...
.map(item => Object.assign({}, item))
03-31
This code creates a new array of objects with the same properties and values as the original array, using the `map()` method and `Object.assign()` function. `map()` is a higher-order function that ...
Object.assign()
tosiya的专栏
10-30 324
这里因为第一个参数不是对象，所以会抛出类型错误。可以方便地合并配置，并且不会修改原始的。对象，用于在模板中展示。这些非对象的源对象都被忽略，合并到一个新的空对象中，得到。在这个 Vue 组件中，
Object.assign实现对象的浅拷贝、json.parse(json.stringify)实现深拷贝
前端泡面人
08-03 255
Object.assign实现对象的浅拷贝、json.parse(json.stringify)实现深拷贝
Object.assign() （最全 最干净 最好用）
start7000k的博客
03-29 521
2、针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。1、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承属性和不可枚举属性是不能拷贝的。Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。4、异常会打断后续拷贝任务。3、目标对象自身也会改变。5. ie不兼容此写法。
Object.assign用法
weixin_66128399的博客
03-06 4850
如果只是想将两个或多个对象的属性合并到一起，不改变原有对象的属性，可以用一个空的对象作为target对象。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。没有同名的属性会直接复制到目标对象上，同名的属性后面的属性值会覆盖前面的同名属性值。1、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承属性和不可枚举属性是不能拷贝的。
Object.assign()详解
freeman_xv1的博客
11-24 165
Object.assign()详解
Object.assign（）用法小结
热门推荐
TurtleOrange的博客
09-30 1万+
Object.assign（）用法 1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 2.Object.assign方法实行的是浅拷贝，而不是深拷贝。目标对象拷贝得到的是这个对象的引用 3.语法：Object.assign(target, …sources) 代码 let aaa = { text: 2, value: 11, } let bbb = { text: 3 } let ccc = Object.assign(a
深拷贝与浅拷贝 （递归、Object.assign({},obj)、JSON操作）
weixin_43433884的博客
12-21 1263
一个引用对象一般来说由两个部分组成：一个具名的Handle，也就是我们所说的声明（如变量）和一个内部（不具名）的对象，也就是具名Handle的内部对象。它在Manged Heap（托管堆）中分配，一般由新增引用对象的New方法是进行创建。 深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响（ 指的是拷贝一个对象时，不仅仅把对象的引用进行复制，还把该对象引用的值也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值