Obtener JSON de URL en JavaScript

Anika Tabassum Era 12 octubre 2023
  1. Obtener JSON de URL usando jQuery
  2. JSON desde URL por el método API Fetch
  3. Use XMLHttpRequest para JSON desde URL
Obtener JSON de URL en JavaScript

Los formatos JSON se toman de una URL en particular. Los datos pueden estar en múltiples formatos y es una de las formas más legibles para humanos y computadoras.

Aquí, discutiremos tres formas de recuperar JSON de URL y usarlo en JavaScript.

Obtener JSON de URL usando jQuery

Por lo general, jQuery.getJSON(url, data, success) es el método de firma para obtener JSON de una URL. En este caso, la URL es una cadena que asegura la ubicación exacta de los datos, y data es solo un objeto enviado al servidor. Y si la solicitud tiene éxito, el estado viene a través del success. Hay una demostración de código abreviado para este proceso.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-1.6.4.js"></script>
  <title>JS Bin</title>
</head>
<body>
<div class="display"></div>
  <script>

  $.getJSON('https://jsonplaceholder.typicode.com/todos/1', function(data){
    var display = `User_ID: ${data.userId}<br>
                   ID: ${data.id}<br>
                   Title: ${data.title}<br>
                   Completion_Status: ${data.completed}`
    $(".display").html(display);
  });
  </script>
</body>
</html>

Producción:

jquery_for_json_url

JSON desde URL por el método API Fetch

En este caso, el método fetch ​​simplemente toma la URL para asignar el servidor de datos y se asegura de devolver los datos JSON.

Fragmento de código:

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(result => result.json())
    .then((output) => {
      console.log('Output: ', output);
    })
    .catch(err => console.error(err));

Producción:

buscar_api_para_json_url

Use XMLHttpRequest para JSON desde URL

Aquí, primero tomaremos la URL en una función con una instancia de XMLHttpRequest. Usaremos el método open para preparar la solicitud de inicialización, y luego con responseType definiremos el tipo de respuesta. Finalmente, el método onload responderá a la solicitud y previsualizará la salida.

Fragmento de código:

var getJSON = function(url, callback) {
  var xmlhttprequest = new XMLHttpRequest();
  xmlhttprequest.open('GET', url, true);
  xmlhttprequest.responseType = 'json';

  xmlhttprequest.onload = function() {
    var status = xmlhttprequest.status;

    if (status == 200) {
      callback(null, xmlhttprequest.response);
    } else {
      callback(status, xmlhttprequest.response);
    }
  };

  xmlhttprequest.send();
};

getJSON('https://jsonplaceholder.typicode.com/todos/1', function(err, data) {
  if (err != null) {
    console.error(err);
  } else {
    var display = `User_ID: ${data.userId}
ID: ${data.id}
Title: ${data.title} 
Completion_Status: ${data.completed}`;
  }
  console.log(display);
});

Producción:

solicitud xmlhttp

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Artículo relacionado - JavaScript JSON