How to combine AJAX with JSON?

Question

I'm trying to read all information from the JSON string. I'm also trying to read it with the help of AJAX. The purpose is to fill an innerHTML with the information, but nothing works.

What is wrong with the code and how can it be solved?

function getResults() {

    var obj = [
      { "number": "Bob", "position": "forward", "shoots": "left" },
      { "number": "John", "position": "forward", "shoots": "right"  }
    ];


    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var return_data = request.responseText;
            document.getElementById("sportresults").innerHTML = return_data;
        }
    };
    xhttp.open("GET", obj, true);
    xhttp.send();
}

starting from the beginning: do you get any errors in console? do you send a GET request to a URL? do you even get a response? — blurfus, Apr 26 '16 at 18:23
Are you trying to send JSON to a server or receive it from a server? If you're just wanting to show `obj` as JSON inside an element, Ajax isn't necessary for that. — Jonathan Lonowski, Apr 26 '16 at 18:25
Three questions, only one answered... you are not getting a response because maybe you are not sending a request? - do you get an errors in console? (i.e. using developer tools in your browser) — blurfus, Apr 26 '16 at 18:28
similar question: [How to make an AJAX call?](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) also see MDN [Ajax](https://developer.mozilla.org/en/docs/AJAX) — Yogi, Apr 26 '16 at 18:58

superjisan · Answer 1 · 2016-04-26T18:31:01.180

Let's break down a few things you might be confused about

First, I think you have AJAX and JSON mixed up. AJAX (Asynchronous Javascript and XML) makes a JavaScript call asynchronously, while JSON (JavaScript Object Notation) is a data format.

In your instance, you can't make a call to get the object obj within your own code. You already have access to it, just use the variable obj for your needs.

Just write this,

document.getElementById("sportresults").innerHTML = obj;

If you do need to make a request get JSON, the obj value can be in it's own file or path and you can put it in obj.json.

Assuming that you have a file called obj.json that looks like this

[
  { "number": "Bob", "position": "forward", "shoots": "left" },
  { "number": "John", "position": "forward", "shoots": "right"  }
]

You can then call your code like this

function getResults() {

 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        var return_data = request.responseText;
        document.getElementById("sportresults").innerHTML = return_data;
    }
 };
 xhttp.open("GET", 'obj.json', true);
 xhttp.send();
}

score 1 · Answer 2 · answered Apr 26 '16 at 18:23

you should write your JSON into file, give path of the file to open function

Syntax of Open is void open( DOMString method, DOMString url, optional boolean async, optional DOMString user, optional DOMString password );

Refer https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

How to combine AJAX with JSON?

2 Answers2