Question

我是React native的初学者。目前，我正在尝试开发移动应用程序，但是我在将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数据？例如，像 this

id:1, name: "wonderful".

我尝试使用map方法执行此操作。代码将为

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

但它仍然无法正常工作。

代码在下面：

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

Answer 1

根据所需的数据形式，这可以实现您想要的：

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

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

1 个答案: