Trying to consume this api using fetch and display on my app not showing

[eebann]

Please i need help om comsuming this api in expo
using fetch
tried it but nit displaying
http://157.230.11.142:5000/presentbox/00000000?text=Something%20Something%20Something&is_closed=true
my code

import { StyleSheet, Text, View, TextInput, ActivityIndicator, FlatList, Button, StatusBar, TouchableOpacity } from 'react-native';
import React, {useEffect, useState} from 'react';
import { Video, AVPlaybackStatus } from 'expo-av';

const Home = () => {
	const [searchInput, setSearchInput] = useState('');
	const [feed, setFeed] = useState([]);
	const video = React.useRef(null); 
  const [status, setStatus] = React.useState({}); 
	useEffect(() => {
		fetch("http://157.230.11.142:5000/presentbox/00000000?text=Something%20Something%20Something&is_closed=true")
		.then(response => response.json())
    .then(data => setFeed(data));
		}, []);
	return (
       <View>
              <View style={styles.feed}>
				<Text>HELLO</Text>
				<FlatList
                                     data={feed}
					renderItem={({item}) => (
						<View style={styles.feedItem}>
							<Text style={styles.feedItemText}>{item.text} 
                         </Text>
						</View>
					)}
							/>
			</View> 
		</View>

please help

[kevinSmith]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[kevinSmith]

It looks like you are having a CORS problem. There are other’s that can explain it better. When I set up a pen with this, I see this in the network tab:

As a short term fix, you can use a CORS proxy, like: https://cors-anywhere.herokuapp.com/. There is a working pen here.

It works as a short term solution but not for production. I’d recommend learning more about CORS and finding a more kosher solution.

[lasjorg]

The API also has to serve over https if your page is served over https.

For example, this won’t work on Codepen, unless you add the s to http.

function getDate() {
  fetch("http://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((json) => console.log(json));
}

getDate();

[eebann]

checking out CORS
to learn deep about it …never heard of it

[ingabd]

API usually need some kind of authentication or authorization when you fetch them, usually in form of private key, unless it is public. This can be included in HTTP headers or body, check the API doc to be sure. Also I don’t know what API you are hitting, from dnschecker it is digitalocean? can you give detail about the API, at least its name so I can check its doc, and what kind of response you expect from the API? array of object with fields A, B, C?

hitting that API through web browser or Insomnia only return this, and I cannot understand what to expect:

{
	"connected": false,
	"got_video": false,
	"id": "00000000",
	"is_closed": true,
	"text": "Happy anything!"
}

CORS (cross origin resource sharing)? it is possible, again, API docs will give you some kind of instruction to go through its defined CORS, but I think it is more possible caused by an authentication problem. Hope this help.

[eebann]

actually the problem is when i fetch the api and use it directly it works but when i use the map method or flatList i get problem.

[kevinSmith]

Well, that’s a separate issue. We’d need to see the code.