How to reformat object using its property value as property key?

Question

how can I assign object property value as property key?

I have a set of data:

const mydata = [
    {
      "id": 001,
      "value": "Value 1",
      "title": "Title 1"
    },
    {
      "id": 002,
      "value": [
        {
          "Name": "Name 1",
          "Age": "20"
        },
        {
          "Name": "Name 2",
          "Age": "30"
        },
      ],
      "title": "Title 2"
    },
]

I want to reformat it to become:

const mydata = [
    {
      "Title 1": "Value 1"
    },
    {
      "Title 2": [
        {
          "Name": "Name 1",
          "Age": "20"
        },
        {
          "Name": "Name 2",
          "Age": "30"
        },
      ]
    },
]

I have tried this code to achieve it:

mydata.map((dt: any) => {
  dt.title: dt.value
});

However, it seems not working.

Any idea how can I reformat it to the one I desire?

Thanks.

score 1 · Answer 1 · edited Jan 11 '21 at 01:53

If you want to transform the array to a different type of variable, use [reduce][1]

const mydata = [
  {
    id: 001,
    value: "Value 1",
    title: "Title 1",
  },
  {
    id: 002,
    value: [
      {
        Name: "Name 1",
        Age: "20",
      },
      {
        Name: "Name 2",
        Age: "30",
      },
    ],
    title: "Title 2",
  },
];

const data = mydata.reduce(
  (acc, cur) => ({ ...acc, [cur.title]: cur.value }),
  {}
);

console.log(data);

score 1 · Answer 2 · answered Jan 11 '21 at 01:49

Please use following code.

Reference URL How to use a variable for a key in a JavaScript object literal?

const mydata = [
    {
      "id": 001,
      "value": "Value 1",
      "title": "Title 1"
    },
    {
      "id": 002,
      "value": [
        {
          "Name": "Name 1",
          "Age": "20"
        },
        {
          "Name": "Name 2",
          "Age": "30"
        },
      ],
      "title": "Title 2"
    },
];

let reData = []; 
mydata.forEach((dt)=>{
  reData.push({[dt.title]: dt.value});
});
console.log(reData);

score 0 · Answer 3 · answered Jan 11 '21 at 01:49

Your map function has an error, and your key assignment has another one. Let's fix it.

const newData = mydata.map((dt: any) => ({
  [dt.title]: dt.value,
}));

First: You can't return an object from an arrow function without parenthesis, if you don't use it, the code will think it is a function body not an object.

Second: If you want to return a value as a key, you need put it inside "[ ]" (Square brackets)

Just that, simple mistakes, at the end you came up with the right logic to solve it

score 0 · Answer 4 · answered Jan 11 '21 at 02:35

Add brackets around the return value.
Use square brackets for a computed property name.

const mydata = [
    {
      "id": 001,
      "value": "Value 1",
      "title": "Title 1"
    },
    {
      "id": 002,
      "value": [
        {
          "Name": "Name 1",
          "Age": "20"
        },
        {
          "Name": "Name 2",
          "Age": "30"
        },
      ],
      "title": "Title 2"
    },
];
const res = mydata.map(({value, title})=>({[title]: value}));
console.log(res);

How to reformat object using its property value as property key?

4 Answers4