How do I output this api's output into a flat list I've console logged the data and its visible but I can't output into a flat lis

Issue

It's a demo api which am trying to output its values into a flat list

This is the code

const Search =() =>{
const[listing, setListing] = useState([]);
  const[isLoading, setIsLoading]= useState(true);
  const[error,setError] = useState(null);

   useEffect(() =>{
    getProduct();
   }, []);

  const getProduct = () =>{
    const url = 'https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=IBM&interval=5min&apikey=demo'
      fetch(url)
      .then((response) => {
        if(!response.ok){
          throw new Error('something is wrong')
        }
          return response.json();
      }).then((data) =>{
        setListing(data);
        setIsLoading(false)
        console.log(data);
      }).catch((error) =>{
        setError(error.message);
        setIsLoading(false);
        console.log(error)
      })
  }
     return (
      <View>
        {isLoading ? (
          <ActivityIndicator color={'blue'} size='large'/>
        ): error ? <Text>{error}</Text>: (
          <FlatList
            data={listing}
            renderItem={({item}) => {
              <View>
                <Text>{item.Data}</Text>
              </View>
            }}
          />
        )}
      </View>
     )
       
}

this is the demo output :

"1. Information": "Intraday (5min) open, high, low, close prices and volume", "2. Symbol": "IBM", "3. Last Refreshed": "2023-11-24 17:00:00", "4. Interval": "5min", "5. Output Size": "Compact", "6. Time Zone": "US/Eastern" }, "Time Series (5min)": { "2023-11-24 17:00:00": { "1. open": "155.1800", "2. high": "155.1800", "3. low": "155.1800", "4. close": "155.1800", "5. volume": "335049" }, please assist am a beginner in react-native

Solution

so there are multiple issues with the code sample that you have posted. Let us go with the basics first. Flatlists work with an array, your API returns an Object. You need to convert it into an array.

To get the desired data as you have posted in demo output you need to do a transformation like this :

Object.values(data['Meta Data'])

You need to call setListing with this data as argument.

Next the renderItem function in your flatlist is also wrong. renderItem expects a function that returns a JSX. Look closely to your code, renderItem is not returning anything. You should either remove the curly braces , like this:

renderItem={({item, index}) => 
              <View>
                <Text>{item}</Text>
              </View>
            }

or explicitly use the return keyword.

Once you do these changes, your code should work as expected.

Please find the working code:

const[listing, setListing] = useState([]);
  const[isLoading, setIsLoading]= useState(true);
  const[error,setError] = useState(null);

   useEffect(() =>{
    getProduct();
   }, []);

  const getProduct = () =>{
    const url = 'https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=IBM&interval=5min&apikey=demo'
      fetch(url)
      .then((response) => {
        console.log('calling data')
        if(!response.ok){
          throw new Error('something is wrong')
        }
          return response.json();
      }).then((data) =>{
        setListing(Object.values(data['Meta Data']));
        setIsLoading(false)
        console.log( Object.values(data['Meta Data']));
      }).catch((error) =>{
        setError(error.message);
        setIsLoading(false);
        console.log(error)
      })
  }

     return (
      <View>
        {isLoading ? (
          <ActivityIndicator color={'blue'} size='large'/>
        ): error ? <Text>{error}</Text>: (
      <View>
        
     
          <FlatList
            data={listing}
            renderItem={({item, index}) => 
              <View>
                <Text>{item}</Text>
              </View>
            }
          />
           </View>
        )}
      </View>
     )
} 

Answered By - Shubham Shukla