Replace the value of a certain item in the object in the array

Project scenario:

I recently encountered a project where the image resource obtained by its interface was unavailable, but in order to continue running the project, I wanted to replace it with my own network image address.

  1. The data format obtained by the interface:
{
    
    
  "status":0,
  "message":[
    {
    
    
    "id":1,
    "url":"http://www.itcast.cn/subject/phoneweb/index.html",
    "img":"http://m.itheima.com/images/slidead/mobile/20191213180241750x410.jpg"
    },        
    {
    
    
    "id":2,
    "url":"http://www.itcast.cn/subject/phoneweb/index.html",
    "img":"http://m.itheima.com/images/slidead/mobile/20191210154717750-410.jpg"
    },
    {
    
    
    "id":3,
    "url":"http://www.itcast.cn/subject/phoneweb/index.html",
    "img":"http://m.itheima.com/images/slidead/mobile/20190327135101750x410-%E4%BC%A0%E6%99%BA%E9%BB%91%E9%A9%AC%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B9%BB%E7%81%AF.jpg"
     }
  ]
}
  1. Data format prepared by yourself for replacing image resources:
			imgUrlList:[
				{
    
    id:1,img_url:"https://img.pconline.com.cn/images/product/5784/578421/q.jpg"},
				{
    
    id:2,img_url:"https://img.pconline.com.cn/images/product/6012/601274/45.jpg"},
				{
    
    id:3,img_url:"https://img.pconline.com.cn/images/product/1086/1086487/0.jpg"},
				{
    
    id:4,img_url:"https://img.pconline.com.cn/images/product/6156/615692/846a19fea2cabb0e.jpg"},
				{
    
    id:5,img_url:"https://img.pconline.com.cn/images/product/5784/578421/q.jpg"},
				{
    
    id:6,img_url:"https://img.pconline.com.cn/images/product/1200/1200911/Z6-2-Z.jpg"},
				{
    
    id:7,img_url:"https://img.pconline.com.cn/images/product/5550/555050/g510-01.jpg"},
				{
    
    id:8,img_url:"https://img.pconline.com.cn/images/product/1381/1381391/sf.jpg"},
				{
    
    id:9,img_url:"https://img.pconline.com.cn/images/product/7101/710192/1-5.jpg"},
				{
    
    id:10,img_url:"https://img.pconline.com.cn/images/product/4358/435856/Deskjet1000.jpg"}
			]

Problem Description

Replace the value of img_url obtained from the interface one by one


solution:

			// 获取推荐商品
			async getHotGoodsList(){
    
    
				const res = await this.$myRequest({
    
    
					url:"/api/getgoods?pageindex=1"
				})
				// 如果status == 0 代表接口有数据返回
				if(res.data.status == 0){
    
    
					// 替换imgurl地址,index为了逐个替换对应下标的img_url值
					res.data.message.forEach((item,index)=>{
    
    
						console.log(this.imgUrlList[index].img_url)
						// 给this.imgUrlList下标
						item.img_url = this.imgUrlList[index].img_url
					})
					// 将整理好的数据保存到hotGoodsList
					this.hotGoodsList = res.data.message
				}
			}

Guess you like

Origin blog.csdn.net/weixin_46278178/article/details/128212818