ReactJS - get json object data from url

Question

How to get data from URL in ReactJS.

The URL is of the following type: http://www.domain.com/api/json/x/a/search.php?s=category

which, if specified in the browser, will display the json object.

How to upload it to ReactJS.

To start, I started with:

const dUrl = "http://www.the....";

console.log(dUrl);

but obviously it displays the url and not the content (which I can filter - this is just this initial step of loading it into an object that I don't know)

Edit: I do not want to use jQuery.

Answer 1

You need to use AJAX for this. This is easy with jQuery.

const dUrl = "http://www.domain.com";

$.ajax(
   {
     url: dUrl, 
     success: function(result){
         console.log(result);
     }
   }
);

You will need to add / import jQuery for it to work.

If you do not want to add ajax, then:

function loadData(url) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       console.log(xhttp.responseText);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

this AJAX

Answer 2

API- Fetch, Facebook. jQuery ReactJS ReactJS DOM.

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

async/await

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

https://facebook.imtqy.com/react-native/docs/network.html

, URL- React Native, ReactJS.

Answer 3

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

, Ajax. . . JQuery.