javascript - 如何从 react-native 中的 GET 请求解析 JSON 数组?

标签 javascript react-native

我正在从我的 native 代码调用 GET 请求,GET 请求的响应如下所示-

[
    {
        "id": 1,
        "title": "homework",
        "detail": "nothing details",
        "status": "1",
        "url": "www.google.com",
        "mail": "a@a.com",
        "phone": "0171551223366",
        "category": "2",
        "timestamp": 12.3
    },
    {
        "id": 2,
        "title": "homework",
        "detail": "nothing details",
        "status": "1",
        "url": "www.google.com",
        "mail": "a@a.com",
        "phone": "0171551223366",
        "category": "2",
        "timestamp": 12.3
    }
]

万一,如果它是一个简单的 json 响应,解析完全没有问题,但万一,这是一个数组,我不知道如何获取它们并将它们保存在一个数组中。

这里我给出了我的代码-

import React from 'react';
import { StyleSheet, Text, View, Image, AsyncStorage, ActivityIndicator } from 'react-native';
import {Icon, Button, Container, Header, Content, Left} from 'native-base';
import CustomHeader from './CustomHeader';

let jwt=''
 class NoteMeHome extends React.Component {


   state = {
      getValue: '',
      dataSource:[],
      isLoading: true
    }


  componentDidMount() {
    AsyncStorage.getItem("token").then(value => {
      console.log(value);
      jwt = value;

      this.setState({
        getValue: value,
      });
    });

    const url = 'my url';
    fetch(url, {
      method: 'GET',
      headers: new Headers({
        'Content-Type' : 'application/json',
        'token': 'abcd',
        'jwt': jwt
      })
    })
    .then((response)=> response.json() )
    .then((responseJson) => {
      console.log('####:'+responseJson.title)
      this.setState({
        dataSource: responseJson,
        isLoading: false
      })
    })
    .catch((Error) => {
      console.log(Error)
    })


  }

  static navigationOptions = ({navigation}) => ({
    title: "Home",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}
            style={styles.icon}
    />
  })



  render() {
    const { getValue } = this.state;

    return(
      this.state.isLoading
      ?
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <ActivityIndicator size="large" color="#330066" animating/>
      </View>
      :
      <Container>
        <CustomHeader
          title="Home"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />
        <Content contentContainerStyle={{flex:1, alignItems:'center', 
        justifyContent:'center', padding:10}}>
        <Button full onPress={()=> this.props.navigation.navigate('Settings')}>
          <Text style={{color:'white'}}>Go To Settings</Text>
        </Button>
        <Text>{this.state.getValue}</Text>
        </Content>
      </Container>
    )
  }



}



const styles = StyleSheet.create({
  icon:{
    height: 24,
    width: 24
  }
})
export default NoteMeHome;

所以,如果有人能帮助我解决这段代码并建议如何将数据从 json 响应保存到数组,那就太好了。

最佳答案

它应该可以工作。否则你可以这样做

for (var i = 0; i < responseJson.length; i++){
 this.state.dataSource.push({
 ...
 })
}

关于javascript - 如何从 react-native 中的 GET 请求解析 JSON 数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55364078/

相关文章:

javascript - 尝试使用 Angular 从 REST 调用填充下拉列表

javascript - 什么是react js的学习方式?

javascript - React Native 导出

javascript - 计算列表中的最高元素并将该值应用于调整大小时的所有元素(jQuery)

javascript - 根据文本字符串的第一个字符生成链接

javascript - 获取函数内ajax调用的返回值

javascript - 在 expo react-native 中将图像转换为 base64(仅在前端): PayloadTooLargeError: request entity too large

javascript - 特定组件中的常用标签栏react-native-router-flux和react-native

react-native - 从抽屉中重置 react 导航堆栈

javascript - 如何使用jquery获取变量中元素的文本?