如何在 React 中获取嵌套的 Json 并使其成为对象数组答案

【问题标题】：How to fetch Json nested and Make it Array of object in React如何在 React 中获取嵌套的 Json 并使其成为对象数组
【发布时间】：2019-08-14 09:43:48
【问题描述】：

我正在设置一个列表数组，并希望将 JSON 中的值解析为该列表

这是数组

const universityOptions = [
  { key: '1', text: 'Universtiy 1', value: 'Universtiy 1' },
  { key: '2', text: 'Universtiy 2', value: 'Universtiy 2' },
  { key: '3', text: 'Universtiy 3', value: 'Universtiy 3' },
  { key: '4', text: 'Universtiy 4', value: 'Universtiy 4' },
  { key: '5', text: 'Universtiy 5', value: 'Universtiy 5' },
  { key: '6', text: 'Universtiy 6', value: 'Universtiy 6' }
]

下面是json

{"success":true,"data":[{"id":1,"name":"University 1"},{"id":2,"name":"University 2"},{"id":3,"name":"University 3"},{"id":4,"name":"University 4"},{"id":5,"name":"University 5"},{"id":6,"name":"University 6"}]}

这是我迄今为止尝试过的方法，我得到了数据，但我只需要 data.name（大学名称），我不知道如何得到它

componentDidMount() {
    const univFetch = fetch('url')
    // university_list state
    univFetch.then(res => {
      if( res.status === 200)
      return res.json() 
    }).then( univJson => {
      this.setState({
        university_list: univJson.data
      })
      console.log(univJson.data);
    })
}

结果

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, name: "University 1"}
1: {id: 2, name: "University 2"}
2: {id: 3, name: "University 3"}
3: {id: 4, name: "University 4"}
4: {id: 5, name: "University 5"}
5: {id: 6, name: "University 6"}
length: 6
__proto__: Array(0)

我希望输出是一个类似的数组

const universityOptions = [
  { key: '1', text: 'Universtiy 1', value: 'Universtiy 1' },
  { key: '2', text: 'Universtiy 2', value: 'Universtiy 2' },
  { key: '3', text: 'Universtiy 3', value: 'Universtiy 3' },
  { key: '4', text: 'Universtiy 4', value: 'Universtiy 4' },
  { key: '5', text: 'Universtiy 5', value: 'Universtiy 5' },
  { key: '6', text: 'Universtiy 6', value: 'Universtiy 6' }
]

谢谢

【问题讨论】：

你必须映射你的响应数据。

标签： arrays json reactjs

【解决方案1】：

试试这样：

const newArray = json.data.map(elem => ({
  key: elem.id.toString(),
  text: elem.name,
  value: elem.name
}));

您的componentDidMount() 最终会变成这样：

componentDidMount() {
  const univFetch = fetch('url')

  univFetch.then(res => {
    if( res.status === 200)
    return res.json() 
  }).then( univJson => {
    const universityList = univJson.data.map(elem => ({
      key: elem.id.toString(),
      text: elem.name,
      value: elem.name
    }));

    this.setState({
      university_list: universityList
    })
  })
}

Here's the Sandbox如果你想看看。希望对您有所帮助。

【讨论】：

Muchas gracias Mate！
德纳达！很高兴它有帮助

【解决方案2】：

您需要迭代您的响应，并且可以像这样创建所需的输出，

this.setState({
    university_list : univJson.data.map(data => ({key:data.id,text:data.name,value:data.name}))
}, ()=>console.log(this.state.university_list))

【讨论】：

【解决方案3】：

错误是使用forEach on univJson 并创建一个数组

  componentDidMount() {
        const univFetch = fetch('url')
        // university_list state
        univFetch.then(res => {
          if( res.status === 200)
          return res.json() 
        }).then( univJson => {
          let univArray = [];
          univJson.forEach((datum, index) => {
            univArray.push({ key: datum.id, text: datum.name, value: datum.name});
          })
          this.setState({
            university_list: univArray
          })
          console.log(univJson.data);
        })
      }

【讨论】：

【解决方案4】：

为什么不执行额外的操作，

componentDidMount() {
const univFetch = fetch('url')
// university_list state
univFetch.then(res => {
  if( res.status === 200)
  return res.json() 
}).then( univJson => {
   var output = [];
   for(var i=0 ;i<univJson.data;i++){
       var obj = {key : univJson.data[i]["id"],
                  text : univJson.data[i]["name"],
                  value : univJson.data[i]["name"]
   }
   output.push(obj)
   }
   this.setState({
        university_list: output
   });
  console.log(output);
})
}

【讨论】：