How to have javascript read a JSON URL

Question

I want my javascript file to search a URL that is a JSON and grab specific contents from the page. This is the URL And I want to grab the averageratingscore_rf.

I've even tried this :

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

getJSON('https://search.mtvnservices.com/typeahead/suggest/?solrformat=true&rows=20&callback=noCB&q=burgos+AND+schoolid_s%3A1262&defType=edismax&qf=teacherfirstname_t%5E2000+teacherlastname_t%5E2000+teacherfullname_t%5E2000+autosuggest&bf=pow(total_number_of_ratings_i%2C2.1)&sort=total_number_of_ratings_i+desc&siteName=rmp&rows=20&start=0&fl=pk_id+teacherfirstname_t+teacherlastname_t+total_number_of_ratings_i+averageratingscore_rf+schoolid_s&fq=',
function(err, data) {
  if (err !== null) {
    alert('Something went wrong: ' + err);
  } else {
    console.log(data.response.docs.averageratingscore_rf);
  }
});

But this doesn't work.

There is no such thing as a 'JSON URL'. There could be a url to a json file. Is this what you mean? — Taplar, Aug 15 '18 at 17:57
At first glance your JSON doesn't appear valid to me. A JSON file can only be JSON, Nothing else can be in it. — zfrisch, Aug 15 '18 at 18:00
possible duplicate of https://stackoverflow.com/questions/12460378/how-to-get-json-from-url-in-javascript — PerrinPrograms, Aug 15 '18 at 18:01
Like @zfrisch mentioned, your call does not seem to valid. For example here is a valid call https://jsonplaceholder.typicode.com/posts — Jghorton14, Aug 15 '18 at 18:02
Tagging on to what @zfrisch pointed out, the response from the url you provided it responding as a jsonp endpoint. — Taplar, Aug 15 '18 at 18:03

score 0 · Answer 1 · answered Aug 15 '18 at 18:04

Your URL is for JSONP, removing the callback argument returns JSON. (Remove callback=noCB)
Since you tagged google-chrome-extension Same Origin Policy may not apply but keep in mind Cross Origin Resource Sharing may need to be enabled.
... or you could handle the JSONP

score 0 · Answer 2 · answered Aug 15 '18 at 18:04

Your URL isn't giving back pure JSON. There's a noCB() function wrapping it. That's probably why it's not being read.

Here's what I saw when I opened the URL:

noCB({ "responseHeader":{ "status":0, "QTime":1}, "response":{"numFound":1,"start":0,"docs":[ { "teacherlastname_t":"Burgos", "pk_id":282380, "schoolid_s":"1262", "averageratingscore_rf":2.47, "total_number_of_ratings_i":125, "teacherfirstname_t":"Fernando"}] }, "spellcheck":{ "suggestions":[]}} );

You may be able to execute that method, but if you only want the json, you can either strip out the "noCB(" and ");" at the beginning or the end when you get it, or strip it out at the server.

vp_arth · Accepted Answer · 2018-08-15T18:15:10.360

It's not a json, it's jsonp response.
JSONP requests perfomed by pass callback name and load this url into DOM script tag.

just don't try ajax+eval, anyway CORS restricts ajax here

Also, data.response.docs is an array, you should iterate it to access averageratingscore_rf

let cb = 'mycallback';
let url = `https://search.mtvnservices.com/typeahead/suggest/?solrformat=true&rows=20&callback=${cb}&q=burgos+AND+schoolid_s%3A1262&defType=edismax&qf=teacherfirstname_t%5E2000+teacherlastname_t%5E2000+teacherfullname_t%5E2000+autosuggest&bf=pow(total_number_of_ratings_i%2C2.1)&sort=total_number_of_ratings_i+desc&siteName=rmp&rows=20&start=0&fl=pk_id+teacherfirstname_t+teacherlastname_t+total_number_of_ratings_i+averageratingscore_rf+schoolid_s&fq=`

function mycallback(data) {
  let res = data.response.docs.map(doc => doc.averageratingscore_rf)
  console.log('averageratingscore_rf of docs:', res);
}

let script = document.createElement('script');
script.src = url;
document.body.appendChild(script)

How to have javascript read a JSON URL

3 Answers3