Problem with refactoring JSON file in ReactJS application

Question

I am having problem with using Array.prototype.map() in Javascript

In specific, I am refactoring a JSON file in my react app, which is `

{
        "id": 1,
        "title": "Manage data in Docker",
        "description": "How to use volume and bind mounts in Docker",
        "content": "How to use volume and bind mounts in Docker",
        "author": {
            "username": "vangdo",
            "firstName": "Vang",
            "lastName": "Do",
            "email": "[email protected]",
            "birthDate": "2022-11-05",
            "createdAt": null
        },
        "createdAt": "2022-11-05T00:00:00"
    }

The output I want to get is:

{
        "id": 1,
        "title": "Manage data in Docker",
        "description": "How to use volume and bind mounts in Docker",
        "content": "How to use volume and bind mounts in Docker",
        "author": "vangdo",
        "createdAt": "2022-11-05T00:00:00"
    },

I have tried mutiple way like use Array.prototype.map(), however I cannot get the expected result. Can someone help me with this issue? Thank you!

Amila Senadheera · Accepted Answer · 2022-11-05 05:32:59Z

1

You only need to destructure your existing JSON and get the properties you want.

Try like this:

const data = [
  {
    id: 1,
    title: "Manage data in Docker",
    description: "How to use volume and bind mounts in Docker",
    content: "How to use volume and bind mounts in Docker",
    author: {
      username: "vangdo",
      firstName: "Vang",
      lastName: "Do",
      email: "[email protected]",
      birthDate: "2022-11-05",
      createdAt: null,
    },
    createdAt: "2022-11-05T00:00:00",
  },
];

const output = data.map(
  ({
    id,
    title,
    description,
    content,
    author: { username: author },
    createdAt,
  }) => ({ id, title, description, content, author, createdAt })
);

console.log(output);

answered Nov 5, 2022 at 5:32

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

2 Comments

adiga Over a year ago

Or just ({ author: { username: author }, ...rest }) => ({ ...rest, author })

A1exandr Belan Over a year ago

Or without destructuring map(item => ({ ...item, author: item?.author?.username }))

Collectives™ on Stack Overflow

Problem with refactoring JSON file in ReactJS application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related