I have the array
const data = [
{
"id": 1,
"name": "Name 1",
"code": "1",
"asig": "[1,2,3]",
"category": "B"
},
{
"id": 2,
"name": "Name 1",
"code": "1",
"asig": "[3,5,9]",
"category": "A"
},
{
"id": 3,
"name": "Name 2",
"code": "2",
"asig": "[3,4,5]",
"category": "A"
}
]
And ordered it like this, grouping the asig and category
let newArray = [];
let last = 0;
data.forEach(elem => {
if(last != elem.code) {
newArray.push({
id: elem.id,
Name: elem.name,
Code: elem.code,
Group: []
});
last = elem.code;
}
let index = newArray.length - 1;
newArray[index].Group.push({
asig: elem.asig,
category: elem.category,
});
});
the new array
console.log(newArray)
[
{
id: 1,
Name: 'Name 1',
Code: '1',
Group: [
{ asig: '[1,2,3]', category: 'B' },
{ asig: '[3,5,9]', category: 'A' }
]
},
{
id: 3,
Name: 'Name 2',
Code: '2',
Group: [ { asig: '[3,4,5]', category: 'A' } ]
}
]
I need to show it as it looks in this table
| id | Name | Group | Category |
|---|---|---|---|
| 1 | Name 1 | A: 3,5,9 - B: 1,2,3 | A, B |
| 3 | Name 2 | A: 3,4,5 | A |
how can I do it? Thanks
for (let index = 0; index < newArray.length; index++) {
console.log(newArray[index]);
console.log(newArray[index].id);
for (let index = 0; index < newArray[index].Group.length; index++) {
console.log(newArray[index].Group[index]);
}
}Now you can get all the data from this array. you can store 'newArray[index].id' this as a variable. Then use any where
You can do as:
const data = [
{
id: 1,
name: "Name 1",
code: "1",
asig: "[1,2,3]",
category: "B"
}, {
id: 2,
name: "Name 1",
code: "1",
asig: "[3,5,9]",
category: "A"
}, {
id: 3,
name: "Name 2",
code: "2",
asig: "[3,4,5]",
category: "A"
}
];
const map = new Map();
data.forEach( ( o ) => {
const { id, name, code, asig, category } = o;
if ( !map.has( name ) ) {
map.set( name, { id, name, code, Group: [{ asig, category }], category: [category] } );
} else {
const existingObj = map.get( name );
existingObj.category.push( category );
existingObj.Group.push( { asig, category } );
}
} );
const dataSet = [...map.values()].reduce( ( acc, curr ) => {
const { id, name, code, Group, category } = curr;
acc.push( {
id, name, code,
Group: Group
.sort( ( a, b ) => a.category.localeCompare( b.category ) )
.map( ( { asig, category } ) => `${category}: ${asig.slice( 0, asig.length - 1 ).slice( "1" )}` ).join( " - " ),
category: category.sort( ( a, b ) => a.localeCompare( b ) ).join( ", " )
} )
return acc;
}, [] );
const tbody = document.querySelector( "tbody" );
dataSet.forEach( ( o ) => {
const { id, name, code, Group, category } = o;
const tr = tbody.insertRow();
[id, name, code, Group, category].forEach( ( prop ) => {
const cell = tr.insertCell();
cell.appendChild( document.createTextNode( prop ) )
} )
} )<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">code</th>
<th scope="col">Group</th>
<th scope="col">category</th>
</tr>
</thead>
<tbody>
</tbody>
</table>