Javascript: Как пройти через массив объектов oop для почтового запроса свойства массива?

Question

У меня есть ответ array, и мне нужно передать данные почтового запроса из этого ответа. В ответе также есть вложенные объекты массива. Итак, как l oop через эти объекты массива в значения ключей post api-запроса?

Ответ, который я получаю, выглядит следующим образом:

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"
        }
    }
    ]
  }
]

Теперь мне нужно передать это product_images свойство объекта массива images.thumbnail_image в значение ключа пост-запроса.

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

ax ios post API-запрос выглядит следующим образом:

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

PS: Я пытался управлять эта проблема с l oop через массив image_files, как показано ниже, но это работает.

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

:: Обновлено ::

Мне также необходимо управлять этим свойством категории в запрос post api. Я пробовал вот так, но он передал [null] значение

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

Answer 1

Для этого можно использовать вложенный оператор map с деструктуризацией.

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

Answer 2

Вы можете просто сопоставить подмассив для каждого элемента массива следующим образом:

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

Answer 3

Вам необходимо запустить карту на внутреннем массиве изображений продуктов, чтобы создать массив URL-адресов

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

Вывод

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

Полный код ниже

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

Answer 4

Вы забыли отчет о возврате

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