How to display information from API

Expo SDK
1

Hello, I’m currently trying to display information from an API, but it doesn’t seem to be working. Right now I have it wait for the information to be fetched, and then I try to display it, but when I get to the displaying part, nothing happens.

May I have some help?

This is what my code look like as of now:

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default class App extends React.Component {

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

  componentDidMount() {
    return fetch('https://api.vexdb.io/v1/get_teams')

      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isloading: false,
          dataSource: responseJson.result,
        })

      })

      .catch((error) => {
        console.log(error)
      });
  }

  render() {

    if (this.state.isloading) {
      return(
          <View style={styles.container}>
            <ActivityIndicator/>
          </View>
        )
    } else {

      let teams = this.state.dataSource.map((val, key) => {
        return <View key={key} style={styles.item}>
          <Text>{val.result}</Text>
        </View>
      });

      return (
        <View style={styles.container}>
          {teams}
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    flex: 1,
    color: '#FF0000',
  }
});

Thank you in-advance.

2

Hey @cameron-html,

Can you elaborate on what you mean by “nothing happens”? Can you add some console logging to see if your fetch payload contains anything to be displayed?

Cheers,

Adam

3

Hey @adamjnav,

I went ahead and checked if it contained anything through ‘console.log’, and I got this:

Array [
  Object {
    "city": "Courtenay",
    "country": "Canada",
    "grade": "High School",
    "is_registered": 0,
    "number": "7842F",
    "organisation": "NIDES/Navigate",
    "program": "VRC",
    "region": "British Columbia",
    "robot_name": "Guider 1",
    "team_name": "Navigators",
  },
]

Is the way I’m trying to display the information wrong?

4

I was able to fix my issue, it seems I needed to place a limit on how many items I wanted, thank you for you help!

1 Like
5

Nice! Glad you figured it out and thanks for sharing the solution as well.

Cheers!

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.