ReactJS: obtenga datos de objetos json de una URL

Estate atento porque en esta división vas a encontrar el arreglo que buscas.

Solución:

Intente usar Fetch API, es recomendado por Facebook. Debe evitar mezclar jQuery con ReactJS y atenerse a la forma ReactJS de manipular el DOM.

function getMoviesFromApiAsync() 
   return fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => 
     return responseJson.movies;
   )
   .catch((error) => 
     console.error(error);
   );

O usando async/await

async function getMoviesFromApi() 
  try 
    let response = await fetch('https://facebook.github.io/react-native/movies.json');
    let responseJson = await response.json();
    return responseJson.movies;
    catch(error) 
    console.error(error);
  

https://facebook.github.io/react-native/docs/network.html

Soy consciente de que la URL es para la documentación de React Native, pero esto también se aplica a ReactJS.

Editar: use fetch para hacer llamadas a la API.

fetch(http://www.example.com/api/json/x/a/search.php?s=category)
  .then(response => response.json())
  .then((jsonData) => 
    // jsonData is parsed json object received from url
    console.log(jsonData)
  )
  .catch((error) => 
    // handle your errors here
    console.error(error)
  )

Fetch está disponible en todos los navegadores modernos.

En React versión 16 o superior, se puede utilizar la siguiente función:

 yourFunctionName = async() => 
    const api_call = await fetch(`yourUrl`);
    const data = await api_call.json();
    console.log(data);
    

valoraciones y comentarios

Nos encantaría que puedieras recomendar esta noticia si te valió la pena.

---

---

Utiliza Nuestro Buscador