map 前端处理后台接口所取到的数据

(已在vue项目当中实现)

处理数据对象为:json串;例如

[ 
{
id:'',
name:''
},
{
id:'',
name:''
},
{
id:'',
name:''
}  
]    

而我们在前端想要取得值为:

[001,002,003,004]   此数作为由后台所查出的id  所对的——   id:[001,002,003,004] 
[1,2,3,4]    此数作为由后台所查出的name    所对的——   name:[1,2,3,4] 

现在,我们想要单独去取出这两个集合    如果直接在vue中使用this.id=res.data (这样写渠道的为json串)∴ 这样肯定是不行的

这时候就需要使用到我们标题所提到的map

将刚才所提到的可以修改为:

this.id = res.data.map(x => x.id)
this.name = res.data.map(y => y.name)

这样就可以将json串中每个集合{} 中的相同字段重整为一个[] 集合,也就是我们想要得出的值。

要点击前端按钮调用Spring Boot后台接口,通常可以使用以下步骤: 1. 在前端代码中定义一个按钮,例如使用HTML中的<button>标签。 2. 给按钮添加一个点击事件监听器,例如使用JavaScript中的addEventListener()方法。 3. 在点击事件监听器中编写代码,使用Ajax等技术向后台发送请求,例如: ``` $.ajax({ url: "/api/example", type: "GET", success: function(data) { console.log(data); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus, errorThrown); } }); ``` 其中,url指定后台接口的地址,type指定HTTP请求的类型,success和error分别处理请求成功和失败的情况。 4. 在后台接口中接收请求并进行处理,例如使用Spring Boot中的@RestController注解定义一个RESTful API,例如: ``` @RestController @RequestMapping("/api") public class ExampleController { @GetMapping("/example") public String example() { return "Hello World!"; } } ``` 其中,@GetMapping指定HTTP请求的类型和路径,example()方法返回一个字符串作为响应。 5. 将处理结果返回前端,通常可以使用JSON格式的数据,例如: ``` @RestController @RequestMapping("/api") public class ExampleController { @GetMapping("/example") public Map<String, Object> example() { Map<String, Object> result = new HashMap<>(); result.put("message", "Hello World!"); return result; } } ``` 其中,Map<String, Object>定义一个键值对,表示响应数据,message键对应的值为"Hello World!"。 具体实现方式可以根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

许豪平安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值