Javascript 如何将json数据存储到数组列表中

我是本地人的初学者。现在我正在尝试开发一个移动应用程序，在将JSON数据存储到数组列表中时遇到了一些问题。例如，JSON数据如下所示

[{"ID":"1", "Name":"wonderful"},{"ID":"2","Name":"happy"}].

现在我正在使用一个第三方库，叫做react native tag select。要使用此库，数据必须以这种方式存储

 const data = [
      { id: 1, label: 'Money' },
      { id: 2, label: 'Credit card' },
      { id: 3, label: 'Debit card' },
      { id: 4, label: 'Online payment' },
      { id: 5, label: 'Bitcoin' },
    ];

在本例中，id的道具是字符串，标签也是字符串。 那么，我怎样才能像这样单独存储JSON数据呢？比如说像这样,

我已经尝试使用map方法来实现这一点。代码将是

但它仍然不起作用

代码如下所示：

export default class select_page extends Component {
  constructor() {
    super()
  this.state = {
    data: [],
  }
}
  //updateSearch = search => {
   // this.setState({ search });
  //};

  componentDidMount(){
    return fetch('url')
    .then((response) => response.json())
    .then(response => this.setState({data:response}))
    .catch((error) => {
      console.error(error);
    });
  }

 render() {

    var getId=this.state.data.map(function(data,index){
      return data.ID
  })


  var getlabel=this.state.data.map(function(data,index){
    return data.Name
    })

    const { search } = this.state;
    const data=[{id:getId,label:getlabel}]

return (
 <View style={styles.TagSelected}>
          <Text style={styles.labelText}>Select Name from below:</Text>
          <SearchBar
            inputStyle={{ backgroundColor: 'white' }}
            inputContainerStyle={{ backgroundColor: 'white', borderRadius: 10 }}
            containerStyle={{ backgroundColor: '#ecf0f1', borderBottomColor: 'transparent', borderTopColor: 'transparent' }}
            placeholder="Search for a trait"
            onChangeText={this.updateSearch}
            value={search}
          />

          <TagSelect
            data={data}
            ref={(tag) => {
              this.tag = tag;
            }}
          />
        </View>
)

---

根据所需数据表单的外观，这可以实现所需的功能：

const data = [{ ID: "1", Name: "wonderful" }, { ID: "2", Name: "happy" }];

const result = data.map(item => {
  return {
    id: parseInt(item.ID),
    label: item.Name
  };
});

console.log(result);

---

您可以使用arraymap[{ID:1，Name:wonderful}，{ID:2，Name:happy}].map{ID:ID，Name:label}=>{ID，label}；你不工作是什么意思？这只是给你们一个ID数组，[1，2]。您需要从映射回调返回新数组中实际需要的对象。@jonrsharpe可能我写得不太清楚。我的意思是，我知道这将返回一个ID数组。但是，我希望它单独添加到道具的ID中。但是我不知道怎么做。看看这些问题和答案，它们似乎与你的问题高度相关：如果你更新name:item，这应该会起作用。name to label:item。Name@MattAft它仍然不起作用。据说undefined不是“u.map”的对象。在这个问题中，我上传了我的一部分代码，也许我想请你帮忙看看我的代码。

export default class select_page extends Component {
  constructor() {
    super()
  this.state = {
    data: [],
  }
}
  //updateSearch = search => {
   // this.setState({ search });
  //};

  componentDidMount(){
    return fetch('url')
    .then((response) => response.json())
    .then(response => this.setState({data:response}))
    .catch((error) => {
      console.error(error);
    });
  }

 render() {

    var getId=this.state.data.map(function(data,index){
      return data.ID
  })


  var getlabel=this.state.data.map(function(data,index){
    return data.Name
    })

    const { search } = this.state;
    const data=[{id:getId,label:getlabel}]

return (
 <View style={styles.TagSelected}>
          <Text style={styles.labelText}>Select Name from below:</Text>
          <SearchBar
            inputStyle={{ backgroundColor: 'white' }}
            inputContainerStyle={{ backgroundColor: 'white', borderRadius: 10 }}
            containerStyle={{ backgroundColor: '#ecf0f1', borderBottomColor: 'transparent', borderTopColor: 'transparent' }}
            placeholder="Search for a trait"
            onChangeText={this.updateSearch}
            value={search}
          />

          <TagSelect
            data={data}
            ref={(tag) => {
              this.tag = tag;
            }}
          />
        </View>
)

const data = [{ ID: "1", Name: "wonderful" }, { ID: "2", Name: "happy" }];

const result = data.map(item => {
  return {
    id: parseInt(item.ID),
    label: item.Name
  };
});

console.log(result);