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

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.

CodePudding user response：

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/app/app.component.html

CodePudding user response：

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 }
]
*/

CodePudding user response：

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.