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 — Alberto
– Alberto, Commented Jun 11, 2021 at 14:33

Kinglish · Accepted Answer · 2021-06-11 16:14:02Z

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, 2021 at 16:14

answered Jun 11, 2021 at 14:40

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kinglish Over a year ago

The reduce is right, but mapping to react component I need to test

Kinglish Over a year ago

@sedprc - is this a react component or just javascript?

sedprc Over a year ago

react component

Kinglish Over a year ago

@sedprc - updated and testable @ stackblitz link

sedprc Over a year ago

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: stackblitz.com/edit/react-ja52hk?file=src/App.js

|

Collectives™ on Stack Overflow

array filtering and map dynamically in js

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related