Move keys of object to individual properties of child objects, creating an array

Question

The API data looks like this:

{
  "00041335": {
    "productId": "8e786e6b",
    "variantId": "0b43df16"
  },
  "00032183": {
    "productId": "9e780e6d",
    "variantId": "0b48df17"
  }
}

I want to make it like this:

[
  {
    "skuId": "00041335",
    "productId": "8e786e6b",
    "variantId": "0b43df16"
  },
  {
    "skuId": "00032183",
    "productId": "9e780e6d",
    "variantId": "0b48df17"
  }
]

How to restructure the object? Is reduce appropriate or is there a better way?

Use `Object.keys()` to get the key of the object. Then use that as the value of `Id` in the new object. — Barmar, Feb 17 '22 at 18:47
`{ Id1: Object.keys(obj)[0], ...Object.values(obj)[0] }`, or: `const [Id1] = Object.keys(obj); return { Id1, ...obj[Id1] }` — CherryDT, Feb 17 '22 at 18:52
I’ve edited this post from your details provided at [JavaScript Object -make key as value](/q/71165799/4642212). Get familiar with [how to access and process objects, arrays, or JSON](/q/11922383/4642212) and how to [create objects](//developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer) and use the static and instance methods of [`Object`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object#Static_methods) and [`Array`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods). — Sebastian Simon, Feb 17 '22 at 22:15
[`Object.entries`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [`map`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [destructuring](//developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), [spread](//developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals). Duplicate target found on [this search page](/search?q=url%3A%22Object%2Fentries%22+url%3A%22Array%2Fmap%22). — Sebastian Simon, Feb 17 '22 at 22:58

score 0 · Answer 1 · answered Feb 17 '22 at 18:53

There might be a better way using more efficient destructuring but this did the trick for me:

taking the first object's key value and inserting it into a new object with property id1. then take the object nested in object1 and spread it over the rest of the object.

let obj1 ={ "00041335332183": { "Id2": "8e786e6b", "Id3": "0b43df16" } }
let keyValue = Object.keys(obj1);
let newObj = {
  id1: keyValue[0],
  ...obj1[keyValue[0]]
}

score -1 · Answer 2 · answered Feb 17 '22 at 19:04

-1

Easiest way would to use Object.keys()and then you can merge the two objects with the spread operator (...).

const o ={ "00041335332183": { "Id2": "8e786e6b", "Id3": "0b43df16" } }

console.log({ Id1: Object.keys(o)[0], ...Object.values(o)[0] })

answered Feb 17 '22 at 19:04

Maik Lowrey

15,957
6
40
79

Vishal Jadhav · Answer 3 · 2022-02-17T19:18:47.900

First of all, you need to find the first key of your object, in order to do that you can use Objects

Object.keys(yourobject) provides your keys in the array format, out of these keys the first index is your ID.

Now you need to create a new object and merge the rest of the data by using the spread operator (...) Learn from here


let data = { "00041335332183": { "Id2": "8e786e6b", "Id3": "0b43df16" } }

let parsedObject = {id: Object.keys(data)[0], ...data[Object.keys(data)[0]]}

console.log  (parsedObject)

Move keys of object to individual properties of child objects, creating an array

3 Answers3