Question

我正在设置一个列表数组，并想将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' }
]

谢谢

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

{{3}}（如果要查看）。希望对您有所帮助。

Answer 2

您需要遍历您的响应，并且可以创建所需的输出，

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

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

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

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

4 个答案: