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

Question

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)
}),

Unmitigated · Accepted Answer · 2020-08-05 14:38:06Z

1

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);

answered Aug 5, 2020 at 14:38

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TMA Over a year ago

Yes, thank you so much for your quick response. I am able to manage from your answer as well.

TMA Over a year ago

I have updated my question regarding category property and for that i have applied the same solution but that is not working in that case.

Unmitigated Over a year ago

You need to use return element.categories.id, not push.

MauriceNino · Accepted Answer · 2020-08-05 14:29:21Z

1

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);

answered Aug 5, 2020 at 14:29

MauriceNino

6,8851 gold badge32 silver badges76 bronze badges

1 Comment

TMA Over a year ago

Thank you so much for this code snippet... It works for me and i am able to manage my dynamic data accordingly. Cheers !!!

John Brandli · Accepted Answer · 2020-08-05 14:46:42Z

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])

Jannes Carpentier · Accepted Answer · 2020-08-05 14:33:30Z

0

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
})

answered Aug 5, 2020 at 14:33

Jannes Carpentier

2,0081 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related