Javascript: How to loop through array of objects for post request for array property?

user_5624578 0
Viewed 1051

I have an array response and i need to pass post request data from that response. The response have nested array objects as well. So how to loop through those array objects into post api request key values ?

Response which i am getting is as below:

records = "data": [
  {
    "id": 1,
    "title": "Black Panther",
    "product_images": [
      {
        "id": 1,
        "images": {
          "id": 1,
          "thumbnail_image": "/assets/1/image.jpg",
        },
      }, 
      {
        "id": 2,
        "images": {
          "id": 2,
          "thumbnail_image": "/assets/2/image.jpg",
        },
      }
    ],
    product_categories: [
    {
        "id": 1,
        "categories": {
          "id": 3,
          "category_name": "Outdoor Sports"
        }
    }
    ]
  }
]

Now i need to pass that product_images array object's images.thumbnail_image property into the post request key value.

records.map((element) => {
  let data;  
  data = {
    "id": element.id,
    "name": element.title,
    "image_files":
      [
        {
          "url": "" // need to pass thumbnail_image value over here. 
        }
      ],
    "product_category": {
        "category_id": [1,2] // need to pass product_categories[i].categories.id value over here. 
    }
  }
})

axios post API request is as below:

axios({
  method: 'post',
  url: 'api_url',
  data: {
      "products": data,
  }
  }).then((response) => {
    console.log(response);
  }).catch((error) => {
    console.log(error)
});

P.S: I have tried to manage this issue with loop through into the image_files array as below but that is working.

"image_files": [
element.product_images.map((ele) => {
  {
    "url": ele.images.thumbnail_image
  }
})
]

::Updated::

I also need to manage that category property into the post api request. I have tried like this way but it pass the [null] value

"category_id": lists.campaign_product_categories.map((element) => {
  let arr = []
  arr.push(element.categories.id)
}),
axios arrays javascript
4 Answers

You can just map the sub array for each array element like so:

const records = [
  {
    id: 1,
    title: "Black Panther",
    product_images: [
      {
        id: 1,
        images: {
          id: 1,
          thumbnail_image: "/assets/1/image.jpg",
        },
      },
      {
        id: 2,
        images: {
          id: 2,
          thumbnail_image: "/assets/2/image.jpg",
        },
      },
    ],
  },
];

const mapped = records.map((element) => ({
  id: element.id,
  name: element.title,
  image_files: element.product_images.map((i) => ({
    url: i.images.thumbnail_image,
  })),
}));

console.log(mapped);

user_91506520

You can use a nested map statement with destructuring to achieve this.

let records = [ { "id": 1, "title": "Black Panther", "product_images": [ { "id": 1, "images": { "id": 1, "thumbnail_image": "/assets/1/image.jpg", }, }, { "id": 2, "images": { "id": 2, "thumbnail_image": "/assets/2/image.jpg", }, } ] } ];
let data = records.map(({id, title:name, product_images}) => (
  {
    id, name,
    "image_files": product_images.map(({images:{thumbnail_image: url}})=>({
      url  
    }))
  }
));
console.log(data);

user_95131840

You need to run a map on the product images inner array to create the URL array

let apiResponses = records.data.map((dataElement) => {
  
  let urls =  dataElement.product_images.map((product_image) => {
    return {"url": product_image.images.thumbnail_image}
  })
  return {
    "id": dataElement.id,
    "name": dataElement.title,
    "image_files":
      urls,  
  }
})
console.log(apiResponses[0])

Outputs

{
  id: 1,
  name: 'Black Panther',
  image_files: [ { url: '/assets/1/image.jpg' }, { url: '/assets/2/image.jpg' } ]
}

Full code below

let records = {"data": [
  {
    "id": 1,
    "title": "Black Panther",
    "product_images": [
      {
        "id": 1,
        "images": {
          "id": 1,
          "thumbnail_image": "/assets/1/image.jpg",
        },
      }, 
      {
        "id": 2,
        "images": {
          "id": 2,
          "thumbnail_image": "/assets/2/image.jpg",
        },
      }
    ]
  }
]}

let apiResponses = records.data.map((dataElement) => {
  
  let urls =  dataElement.product_images.map((product_image) => {
    return {"url": product_image.images.thumbnail_image}
  })
  return {
    "id": dataElement.id,
    "name": dataElement.title,
    "image_files":
      urls,  
  }
})
console.log(apiResponses[0])
user_25887710

You forgot the return statement

records.map((element) => {
  let data;  
  data = {
    "id": element.id,
    "name": element.title,
    "image_files":
      [
        {
          "url": "" // need to pass thumbnail_image value over here. 
        }
      ],  
  }
  return data; // <------- this line
})
user_140143220
Related