无法从 api 调用中获取 Json 数据

debugcn 发表于 Dev

瓦他那他

我想知道如何在数组数组中获取 json 数据。

我希望能够根据组group_id和列表中的所有用户group_id以及他们的所有凭据来提取组。这是 json 数据结构的样子：

{
  "groups": [
    {
      "group_id": 736,
      "members": [
        {
          "user_id": 1,
          "email": "[email protected]",
          "first_name": "John",
          "last_name": "Doe"
        },
        {
          "user_id": 14,
          "email": "[email protected]",
          "first_name": "Be",
          "last_name": "Hg"
        },
        {
          "user_id": 10,
          "email": "[email protected]",
          "first_name": "Sugar",
          "last_name": "Tea"
        }
      ]
    },
    {
      "group_id": 737,
      "members": [
        {
          "user_id": 3,
          "email": "[email protected]",
          "first_name": "Kent",
          "last_name": "Torrel"
        },
        {
          "user_id": 12,
          "email": "Chh",
          "first_name": "Dog",
          "last_name": "Go"
        },
        {
          "user_id": 15,
          "email": "",
          "first_name": "",
          "last_name": ""
        }
      ]
    },
    {
      "group_id": 738,
      "members": [
        {
          "user_id": 6,
          "email": "[email protected]",
          "first_name": "Raj",
          "last_name": "Parikh"
        },
        {
          "user_id": 2,
          "email": "[email protected]",
          "first_name": "Vathana",
          "last_name": "Him"
        },
        {
          "user_id": 11,
          "email": "[email protected]",
          "first_name": "Sugar",
          "last_name": "Tea"
        }
      ]
    },
    {
      "group_id": 739,
      "members": [
        {
          "user_id": 13,
          "email": "Hdh",
          "first_name": "Ou",
          "last_name": "Hm"
        },
        {
          "user_id": 9,
          "email": "[email protected]",
          "first_name": "Larry",
          "last_name": "Jones"
        },
        {
          "user_id": 4,
          "email": "[email protected]",
          "first_name": "Megan",
          "last_name": "Cruz"
        }
      ]
    },
    {
      "group_id": 740,
      "members": [
        {
          "user_id": 8,
          "email": "[email protected]",
          "first_name": "Jajsdjao",
          "last_name": "Doe"
        },
        {
          "user_id": 16,
          "email": "",
          "first_name": "",
          "last_name": ""
        },
        {
          "user_id": 5,
          "email": "[email protected]",
          "first_name": "Liron",
          "last_name": "Benjamin"
        }
      ]
    }
  ]
}

到目前为止，这就是我所拥有的，但它只group_id在第一个索引处拉取 a 的用户。我试过使用“item.members.user_id”，但没有显示任何内容。

constructor(props) {
          super(props);
          this.state = {
            isLoading: false,
          dataSource: null,
      }
    }

      componentDidMount(){
          return fetch('https://strengthn-backend.herokuapp.com/activeGroups')
          .then((response) => response.json())
          .then((responseJson) => {
              this.setState({
                  isLoading: false,
                  dataSource: responseJson.groups,
              })
          })
          .catch((error) => {
              console.error(error);
          });
      }

 addPerson() {

        if (this.state.isLoading) {

            return (
            <List>
            {console.log(this.state.dataSource)}
             <FlatList
            data={this.state.dataSource}
            renderItem={({item})=> (
            <Text>{item.members[0].user_id}</Text> 
            )}
            />  
            </List>

        )
    }

显示名称

需要 for 循环，否则它只会获取第一个数据。试试这个：

export default class Test extends React.Component{
  constructor(){
    super();
    this.state ={
      dataSource:'',
    }
  }

  componentDidMount(){
    this.fetchAPI()
  }

fetchAPI= async() => {
  let that= this;
  await fetch('https://strengthn-backend.herokuapp.com/activeGroups')
    .then(response => response.json())
    .then(response => {
      that.setState({ dataSource: response.groups})
    }).catch((error) => {
      Alert.alert("Error")
      return;
    })

    // console.warn("mana", this.state.dataSource);
  }


  _renderItem = ({item}) => {
    let temp = []

    for(var i=0; i < item.members.length; i++){

      temp.push(
        <View>
          <Text>{item.members[i].first_name} </Text>
          <Text>{item.members[i].last_name}</Text>
        </View>
      )
    }
    return temp
  }

  render(){
    return(
      <View>
        <FlatList
            data={this.state.dataSource}
            renderItem= {this._renderItem}
            />
      </View>
    )
  }
}

希望能帮助到你！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。