How do I turn one object into multiple objects depending on how many keys there are?

Question

I have a simple question.

I want to turn this array of one object...

[
    {
        id: 1,
        caseId: "Default Case Set",
        casenbr: "CASEWORK",
        submitterCasenbr: 34,
        othref: 0,
        sta: 0,
        type: 0,
        create: 0,
        startd: 0
    }
]

into an array of multiple objects like this...

[
    {
        id: 1
    },
    {
        caseId: "Default Case Set"
    },
    {
        casenbr: "CASEWORK"
    },
    {
        submitterCasenbr: 34
    },
    {
        othref: 0
    },
    {
        sta: 0
    },
    {
        type: 0
    },
    {
        create: 0
    },
    {
        startd: 0
    }
]

What would be the best approach to do this? Basically, I want to take all the key/value pairs in the object and turn them each into objects.

So, if I have an array of one object with 100 key/value pairs, I'd want to create one array of 100 objects that have only one key/value pair.

The reason I'm doing this is to create an array that I can use for an ngFor directive in my Angular 13 app.

I don't know if there is a way for ngFor in Angular to repeat over the key/value pairs of one object in one array, so that's what I'm creating one array of multiple objects.

"*What would be the best approach*" The *best* of anything is generally quite subjective, questions of which type are explicitly off-topic per the scope of the site defined in the [help/on-topic]. Instead, show us the code you've written in an attempt to do this before posting here as a [mre], along with a succinct explanation as to where you're getting stuck in said attempt. See also: [ask] — esqew, Jan 11 '22 at 21:50
Look for [Object.keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) to get an array of the property names... Then loop that array and create an object for each. — Louys Patrice Bessette, Jan 11 '22 at 21:52
ngFor does have the abhility to loop over key/value pairs with a pipe called keyvalue. Here's an answer describing it: https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — Mathew Berg, Jan 11 '22 at 22:15

score 1 · Answer 1 · answered Jan 11 '22 at 22:18

I don't think this question should of been closed as the answer is more in line with how to use ngFor.

If you want to loop over say your array but then loop over all your keys as columns you could have something like this:

<table>
  <thead>
    <tr>
      <th *ngFor="let column of data[0] | keyvalue">
        {{ column.key }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of data">
      <td *ngFor="let column of row | keyvalue">
         {{ column.value }}
      </td>
    </tr>
  </tbody>
</table>

This would give you a table (along with headers) mimicking your data. See this stackblitz: https://stackblitz.com/edit/angular-daubr3?file=src%2Fapp%2Fapp.component.html

score 1 · Answer 2 · answered Jan 11 '22 at 22:32

To achieve this in JavaScript directly, you can use the static method Object.entries() to deconstruct each key and value and then reconstruct them with Object.fromEntries() as new array elements.

// Original Array with object
const array = [
  {
    id: 1,
    caseId: "Default Case Set",
    casenbr: "CASEWORK",
    submitterCasenbr: 34,
    othref: 0,
    sta: 0,
    type: 0,
    create: 0,
    startd: 0,
  },
];

// Create an array of entries from the object
const [entries] = array.map((el) => Object.entries(el));
console.log(entries);
/* 
entries OUTPUT:
[
  [ 'id', 1 ],
  [ 'caseId', 'Default Case Set' ],
  [ 'casenbr', 'CASEWORK' ],
  [ 'submitterCasenbr', 34 ],
  [ 'othref', 0 ],
  [ 'sta', 0 ],
  [ 'type', 0 ],
  [ 'create', 0 ],
  [ 'startd', 0 ]
]
*/

// Create new array of Objects from entries
const newArray = entries.map((entry) => Object.fromEntries([entry]));
console.log(newArray);
/* 
newArray OUTPUT:
[
  { id: 1 },
  { caseId: 'Default Case Set' },
  { casenbr: 'CASEWORK' },
  { submitterCasenbr: 34 },
  { othref: 0 },
  { sta: 0 },
  { type: 0 },
  { create: 0 },
  { startd: 0 }
]
*/

Question is asking for an iterator to use in ngFor, technically it can directly loop over the object, please refer to other answer — Khuram Niaz, Jan 11 '22 at 23:42

score 0 · Answer 3 · answered Jan 11 '22 at 23:26

console.log([{
  id: 1,
  caseId: "Default Case Set",
  casenbr: "CASEWORK",
  submitterCasenbr: 34,
  othref: 0,
  sta: 0,
  type: 0,
  create: 0,
  startd: 0
}].reduce((acc, obj) => {
  Object.keys(obj).forEach((key) => {
    acc.push({[key]: obj[key]})
  });
  return acc;
}, []));

Here is one way to do it. By using a combination of Array.reduce and Object.keys. Keep in mind if you have multiple objects in your root array, it will iterate over those too and construct objects and accumulate them in to the final output array as well. However, your example data only shows 1 object in your root array.

As others have mentioned, we are missing context which would ultimately inform the best way to help solve the problem. But this code should achieve what you are intending to do.

score 0 · Answer 4 · answered Aug 10 '23 at 17:40

You can solve this using as

let data =[
    {
        id: 1,
        caseId: "Default Case Set",``
        casenbr: "CASEWORK",
        submitterCasenbr: 34,
        othref: 0,
        sta: 0,
        type: 0,
        create: 0,
        startd: 0
    }
]
let result=[];

for(let i in data){
  console.log()
  result.push({
    [i]:data[i]
  })
}

How do I turn one object into multiple objects depending on how many keys there are?

4 Answers4