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

CodePudding user response：

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/[email protected]/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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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]);
    }
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Now you can get all the data from this array. you can store 'newArray[index].id' this as a variable. Then use any where