Reading JSON data from a url using javascript - javascript

I want to read data from this link http://starlord.hackerearth.com/gamesext.
I went through this https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON and was able to obtain data from https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.
Trying similar approach for getting data from http://starlord.hackerearth.com/gamesext is not working for me.
This is how I tried:
var requestURL = 'http://starlord.hackerearth.com/gamesext';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var games = request.response;
document.getElementById("para").innerHTML = "for check";//para is a paragraph id
fun1(games);
}
function fun1(jsonObj){
//getting first title
document.getElementById("para").innerHTML = jsonObj[0]["title"];
}
I would want to know is that data in JSON and how to get it?

Try using the JSON.parse() method:
function fun1(jsonObj){
//getting first title
jsonObj = JSON.parse(jsonObj);
document.getElementById("para").innerHTML = jsonObj[0]["title"];
}
This will turn valid JSON into a javascript object that can be accessed as you are trying to do below.

This works perfectly fine for me:
var requestURL = 'http://starlord.hackerearth.com/gamesext';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(xhttp.response[0].title) # LittleBigPlanet PS Vita
}
};
xhttp.open("GET", requestURL);
xhttp.responseType = 'json';
xhttp.send();
Give it a try!

Using fetch this is pretty simply.
Below is an example.
const url = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
async function getData() {
const json = await (await fetch(url)).json();
console.log(json);
}
getData();

just put request.send(); after all the code you provided.

Related

How do I make multiple API calls via XMLHttpRequest?

I'm not that experienced when it comes to APIs so excuse me in advance.
I'm trying to get a button to display the contents (response) of an API, and the code below works wonders. I'm wondering how I would make the exact same request, but instead of the "explicit" endpoint, I want a "history" endpoint instead.
How would I do this?
const data = null;
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
var object1;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
object1 = JSON.parse(this.responseText);
}
document.getElementById('thejoke').innerHTML = object1.value;
});
xhr.open("GET", "https://api.chucknorris.io/jokes/random?category=explicit");
xhr.send(data);
The simplest answer would be to make it a function:
function send(category) {
const url = "https://api.chucknorris.io/jokes/random?category=" + category
const data = null;
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
var object1;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
object1 = JSON.parse(this.responseText);
}
document.getElementById('thejoke').innerHTML = object1.value;
});
xhr.open("GET", "");
xhr.send(data);
}
And then you can you call it like this:
send("explicit");
The only problem you then face is that object1 is not available outside of the function. You could work around this by making object1 a global variable, or do the things you want to directly in the EventListener.

Passing extra arguments to XMLHttpRequest.onload

I'm trying to comunicate with a server, using XMLHttpRequest in javascript.
How can I pass info to the onload function?
// global variable that containts server response
var reply;
var makeRequest = function(extraInfo) {
var request = new XMLHttpRequest();
request.open(...);
request.onload = handler;
};
var handler = function(data) {
reply = data.target.response;
console.log("Server Reply: " + reply);
};
How can I pass the parameter extraInfo from makeRequest to the handler function? (without using a global variable)
Just use a closure in such way:
...
var makeRequest = function(extraInfo) {
var request = new XMLHttpRequest();
request.open(...);
request.onload = function(data) {
// extraInfo is accessible here
reply = data.target.response;
console.log("Server Reply: " + reply);
};
};
I figured out that passing extra info into the request handler can be done this way: (At least is good for me)
request.open(...);
request.extraInfo = identifier;
request.onload = function() {
identifier = this.extraInfo;
};
The accepted solution didn't work for me, but this did
const params = new FormData();
params.append('selectedValue', selectedValue);
const xhr = new XMLHttpRequest();
xhr.open('post', url, true);
xhr.send(params);
xhr.extraInfo = extraInfo; // <- set your data here
xhr.onload = (e) => {
const data = JSON.parse(xhr.responseText);
alert(xhr.extraInfo) /// <- access it like this
alert(e.target.extraInfo) // <- or like this
//return data;
};

New JSON information being written on top of old info instead of being erased

var tempUpdate = setInterval(getJSON, 5000);
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://api.darksky.net/forecast/mykey/41.5456657,-72.6746849';
function getJSON(){
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
window.superHeroes = request.response;
populateHeader(superHeroes);
$.ajaxSetup({
cache:false
});
}
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.className = "temp"
myH1.textContent = roundUp(jsonObj['currently']['apparentTemperature'], 100) + "°";
header.appendChild(myH1);
}
I thought it had something to do with JSON caching, so I looked around and added that cache:false command, but that didn't do the trick. I tried setting the textContent to " " before writing the JSON info. Nothing worked. It's writing the new information directly on top of the old information so it looks like a big mess of numbers stacked on top of each other.

convert URL into file object using javascript only

Link given:
example.com/data/videos/videoname.mp4
How to pass this link as fileInput?
var fileUrl = window.URL.createObjectURL(fileInput);
All should be done in javascript only.
Need a solution in pure javascript only not using any jquery.
You can use ajax and get blob
var url = 'http://example.com/data/videos/videoname.mp4';
var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:'+url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var myObject = this.response;
}
};
xhr.send();

Ionic controller XMLHttpRequest function doesn't work

does somebody know why this doesn't work? I get a error message at 'request.status' in Ionic
.factory('Nieuws', function() {
var url = "http://echo.jsontest.com/ID/2/bericht/test";
var request = new XMLHttpRequest();
request.open("GET", url);
var nieuws;
request.onload = function () {
if (request.status = 200) {
nieuws = JSON.parse(request.responseText);
//console.log(nieuws);
}
};
You're trying to assign a value to a read only property when you need to be making a comparison.
Replace = with ==.

Categories