Reshape object into another object

user_15486615 0
Viewed 105

I am trying to use pro-gallery library in my project and it accepts an array of image like this :

const items = [
  {
    // Image item:
    itemId: "sample-id",
    mediaUrl: "https://i.picsum.photos/id/674/200/300.jpg?hmac=kS3VQkm7AuZdYJGUABZGmnNj_3KtZ6Twgb5Qb9ITssY",
    metaData: {
      type: "image",
      height: 10,
      width: 100,
      title: "sample-title",
      description: "sample-description",
    },
  },
  ...
]

But my own array of items looks like this, how would you do to extract interesting fields and recreate a new array ?

"products": [
  {
    "_id": "618e2787d193ae4a3068cae5",
    "name": "Photo",
    "category": "cuba",
    "image": "https://someimage.com/dqve1.jpg",
    "price": 20,
    "countInStock": 12,
    "brand": "John Doe",
    "description": "Description example...",
    "seller": "618aeab0f82f5854ec925a5f",
  },   
  ...
]
reactjs arrays json javascript
1 Answers

I'm assuming you'd like to flatten your object. So if I understand the question correctly, this solution should work perfectly.

You can use forEach to iterate through your array of objects, then use Objects.entries to extract the key value pairs of the objects and insert them into a new object in our preferred formatting. Finally, we push that object onto our array.

const items = [
    {
        itemId: "sample-id",
        mediaUrl:
            "https://i.picsum.photos/id/674/200/300.jpg?hmac=kS3VQkm7AuZdYJGUABZGmnNj_3KtZ6Twgb5Qb9ITssY",
        metaData: {
            type: "image",
            height: 10,
            width: 100,
            title: "sample-title",
            description: "sample-description",
        }},
    {
        itemId: "secondSample",
        mediaUrl:
            "https://i.picsum.photos/id/674/200/300.jpg?hmac=kS3VQkm7AuZdYJGUABZGmnNj_3KtZ6Twgb5Qb9ITssY",
        metaData: {
            type: "image",
            height: 100,
            width: 200,
            title: "second image",
            description: "sample-description",
        }},
    {
        itemId: "sample-id-3",
        mediaUrl:
            "https://i.picsum.photos/id/674/200/300.jpg?hmac=kS3VQkm7AuZdYJGUABZGmnNj_3KtZ6Twgb5Qb9ITssY",
        metaData: {
            type: "image",
            height: 1028,
            width: 130,
            title: "sample-title-3",
            description: "sample-description-3",
        },
    },
];

let newItems = {"items": [
    ]};

items.forEach((item, index) => {
    let thisItem = {};
    for (const [key, value] of Object.entries(item)) {
        if(typeof value === 'object'){
            for (const [k, v] of Object.entries(value)) {
                thisItem[k] = v;

            }
        } else {
            thisItem[key] = value;

        }
    }
    newItems.items.push(thisItem);
});

console.log(newItems);

user_11549790
Related