Home > Mobile >  Reshape object into another object
Reshape object into another object

Time:11-13

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

CodePudding user response:

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);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related