array filtering and map dynamically in js

Question

i have a json like this:

[
  {
    "part": "LM",
    "section": "021",
    "column": "001",
    "description": "Descrizione attività/passività",
    "type": "NUM"
  },
  {
    "part": "LM",
    "section": "021",
    "column": "002",
    "description": "Assenza cause Ostative Applicazione Regime",
    "type": "CB"
  },
  {
    "part": "LM",
    "section": "042",
    "column": "001",
    "description": "Differenza su reddito",
    "type": "NUM"
  },
  {
    "part": "LM",
    "section": "050",
    "column": "006",
    "description": "Perdite non compensate - Eccedenza 2018",
    "type": "NUM"
  }
]

and i wanna map items splitted for section prop. Aspect output is:

      <div>section 021
        <p>column 001</p>
        <p>column 002</p>
      </div>

      <div>section 042
      <p>column 001</p>
      </div>

      <div>section 050
      <p>column 006</p>
      </div>

How can dynamically pass the section prop as filter parameter?

I have tried something like: obj.filter((item) => item.section == "021").map((item) => ... and works but i want the "021" is dynamic for every value in the object.

Thank you very much guys

Does this answer your question? [how to group by the array values dynamically in javascript](https://stackoverflow.com/questions/44390145/how-to-group-by-the-array-values-dynamically-in-javascript) — Alberto Sinigaglia, Jun 11 '21 at 14:33

Kinglish · Accepted Answer · 2021-06-11T16:14:02.703

1

export default function App() {
  const data = [
    {
      part: 'LM',
      section: '021',
      column: '001',
      description: 'Descrizione attività/passività',
      type: 'NUM'
    },
    {
      part: 'LM',
      section: '021',
      column: '002',
      description: 'Assenza cause Ostative Applicazione Regime',
      type: 'CB'
    },
    {
      part: 'LM',
      section: '042',
      column: '001',
      description: 'Differenza su reddito',
      type: 'NUM'
    },
    {
      part: 'LM',
      section: '050',
      column: '006',
      description: 'Perdite non compensate - Eccedenza 2018',
      type: 'NUM'
    }
  ];

  const output = Object.values(
    data.reduce((b, a) => {
      if (b.hasOwnProperty(a.section)) b[a.section].columns.push(a.column);
      else {
        a.columns = [a.column];
        b[a.section] = a;
      }
      return b;
    }, {})
  );
  // console.log(output);

  return (
    <div>
      {output.map(obj => (
        <div>
          {obj.section}
          <ul>
            {obj.columns.map(col => (
              <li> {col} </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

View here: https://stackblitz.com/edit/react-txmy72?file=src/App.js

edited Jun 11 '21 at 16:14

answered Jun 11 '21 at 14:40

Kinglish

23,358
3
22
43

The reduce is right, but mapping to react component I need to test – Kinglish Jun 11 '21 at 15:09
@sedprc - is this a react component or just javascript? – Kinglish Jun 11 '21 at 15:40
react component – sedprc Jun 11 '21 at 15:58
@sedprc - updated and testable @ stackblitz link – Kinglish Jun 11 '21 at 16:14
ok perfect but which is the right condition to show the description too? i have modified in some way but the first loop skip the description. here the reseult: https://stackblitz.com/edit/react-ja52hk?file=src/App.js – sedprc Jun 11 '21 at 20:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233681/discussion-between-sedprc-and-kinglish). – sedprc Jun 11 '21 at 20:43

array filtering and map dynamically in js

1 Answers1