如何从对象生成动态选择框

Question

我正在尝试基于从api获取的数据来生成动态选择框。

这里是对象

{
    "profession": [{
        "id": 15,
        "name": "Sales/Marketing",
        "description": "Sales/Marketing"
    }, {
        "id": 16,
        "name": "Analyst",
        "description": "Analyst"
    }, {
        "id": 17,
        "name": "Doctor/Medical",
        "description": "Doctor/Medical"
    }],
    "education": [{
        "id": 1,
        "name": "10th",
        "description": ""
    }, {
        "id": 2,
        "name": "12th",
        "description": ""
    }, {
        "id": 3,
        "name": "Diploma",
        "description": ""
    }],
    "profilestatus": [{
        "status_id": 1,
        "status_name": "some data",
        "status_message": "some data"
    }, {
        "status_id": 2,
        "status_name": "some data",
        "status_message": "some data"
    }, {
        "status_id": 3,
        "status_name": "some data",
        "status_message": "some data"
    }]
}

这里对象中的每个键（例如：专业，学历，个人资料状态）都是一个单独的选择框。我能够生成空白选择框，但未传递选项值。如何将选项传递给特定的“选择”框？

{
    Object.keys(CustomerAPI).map((key)=>{
        return(<Select

        options={key.map((select, i)=>{
            return select.name
        })}
        placeholder='some text'

        >
        </Select>)
    })
}

这给我指出key.map不是函数的错误。请有人帮忙。

Answer 1

const data = {
  "profession": [{
      "id": 15,
      "name": "Sales/Marketing",
      "description": "Sales/Marketing"
  }, {
      "id": 16,
      "name": "Analyst",
      "description": "Analyst"
  }, {
      "id": 17,
      "name": "Doctor/Medical",
      "description": "Doctor/Medical"
  }],
  "education": [{
      "id": 1,
      "name": "10th",
      "description": ""
  }, {
      "id": 2,
      "name": "12th",
      "description": ""
  }, {
      "id": 3,
      "name": "Diploma",
      "description": ""
  }],
  "profilestatus": [{
      "status_id": 1,
      "status_name": "some data",
      "status_message": "some data"
  }, {
      "status_id": 2,
      "status_name": "some data",
      "status_message": "some data"
  }, {
      "status_id": 3,
      "status_name": "some data",
      "status_message": "some data"
  }]
}
let prof=data.profession;
let edu =data.education;
let arr = [...prof, ...edu];

如果您只想从事职业

      <div>
       <h3>profession</h3>
       <select>
       {prof.map(pro=>
        <option key={pro.id} value={pro.name}>{pro.name}</option>
        )}
       </select>
      </div>

如果您同时需要专业和学历

      <div>
       <h3>Profession & Education</h3>
       <select>
       {arr.map(a=>
        <option key={a.id} value={a.name}>{a.name}</option>
        )}
       </select>
      </div>