js中的数组过滤和动态映射

Question

我有一个这样的 json：

[
  {
    "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"
  }
]

我想映射项目拆分为部分道具。 方面输出是：

      <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>

如何动态传递section prop作为过滤参数？

我尝试过类似的方法： obj.filter((item) => item.section == "021").map((item) => ... 并且可以工作，但我希望“021”对于对象中的每个值都是动态的。

非常感谢你们

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

在这里查看：https://stackblitz.com/edit/react-txmy72?file=src/App.js