如何循环数组并将对象数组中的值输出为“值”和“标签”？

Question

I have the following data as array of objects in a separate file

export const usersRowData = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "value": "Leanne Graham",
    "label": "Leanne Graham"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    }
  }
]

inside my react component I have these filters data for dropdown hardcoded as value and label:

const filters = [
  {
    label: "name",
    options: [
      { value: "Dietrich", label: "Dietrich" },
      { value: "Patricia", label: "Patricia" }
    ]
  },
  {
    label: "username",
    options: [
      { value: "Kamren", label: "Kamren" },
      { value: "Bret", label: "Bret" }
    ]
  },
  {
    label: "email",
    options: [{ value: "Sincere@april.biz", label: "Sincere@april.biz" }]
  }
];

How can I loop an array output every name as value and label inside my react component so I can display those in a list.

Answer 1

从其他文件导入它们：

import { usersRowData as filters } from "./otherFile";

Answer 2

Are you saying displaying like option and value?

const filters = [
  {
    label: "name",
    options: [
      { value: "Dietrich", label: "Dietrich" },
      { value: "Patricia", label: "Patricia" }
    ]
  },
  {
    label: "username",
    options: [
      { value: "Kamren", label: "Kamren" },
      { value: "Bret", label: "Bret" }
    ]
  },
  {
    label: "email",
    options: [{ value: "Sincere@april.biz", label: "Sincere@april.biz" }]
  }
];

function App() {
  return (
    <section>
    {filters.map(data => {
      const label = <label> {data.label} </label>
      return (
        <section>
            {label}
          <select>
            {data.options.map(option => {
              return(
                <option value={option.value}> {option.value} </option>
              )
            })}
          </select>
        </section>
      )
    })}
    </section>
  )
}