How to Load a JSON Object from a File with Ajax

How do I load a JSON object from a file with ajax?

You don't need any library, everything is available in vanilla javascript to fetch a json file and parse it :

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

// this requests the file and executes a callback with the parsed result once
//   it is available
fetchJSONFile('pathToFile.json', function(data){
    // do something with your data
    console.log(data);
});

How to load external JSON data via an ajax call on html page?

AJAX means "Asynchronous JavaScript And XML", and it seems that you missed the asynch part. The code that is using the "data" variable is outside the callback, then this variable doesn't exist (or its value is undefined).

You need to use the json data after receiving it, something like this (it could probably be cleanup a little bit):

$.ajax({
    url: 'http://127.0.0.1:8887/data.json',
    dataType: "json",
    success: function(data) {
        //handle you data here

            // create visualization
            var container = document.getElementById('visualization');
            var options = {
            // option groupOrder can be a property name or a sort function
            // the sort function must compare two groups and return a value
            //     > 0 when a > b
            //     < 0 when a < b
            //       0 when a == b
            groupOrder: function (a, b) {
              return a.value - b.value;
            },
            orientation: {
                axis: 'top',
                item: 'top'
            },
            height: "85vh",
            template: template
            //timeAxis: {scale: 'day', step:3}
            };

            var timeline = new vis.Timeline(container);
            timeline.setOptions(options);
            timeline.setGroups(groups);
            timeline.setItems(data.data); 

            timeline.on('doubleClick', function (properties) {
                window.open('the_doc_url', 
                            'newwindow', 
                            'width=1000,height=600'); 
                return false;
            });
      }
});

How to retrieve data from JSON file using Jquery and ajax?

your code is corect, you must move your code to server, on server your ajax call json, all will be work.

Get data from json file and display the value using jquery/ajax

It is a async function call, you need to put alert in your ajax success function

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            let myObject = JSON.parse(json);
            currencyRate += myObject.USD_INR.val;

            // put alert here
            alert(currencyRate);
        }
    })
}

Or a better approach would be like below.

ajaxTest().then(function( json ) {
   let myObject = JSON.parse(json);
   currencyRate += myObject.USD_INR.val;

   // put alert here
   alert(currencyRate);
});

Or even use callbacks as follows:

function ajaxTest( callback ) {
        let currencyRate = "";

        $.ajax({
            url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
            dataType: "jsonp",
            success: function(json) {
                let myObject = JSON.parse(json);
                currencyRate += myObject.USD_INR.val;

                callback(currencyRate);
            }
        })
    }

ajaxTest(function( result ) {
  alert(result)
})

Updated

No need to parse the return json at all.

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            // no need to parse it to json anymore
            // let myObject = JSON.parse(json);
            currencyRate += json.USD_INR.val;

            // put alert here
            alert(currencyRate);
        }
    })
}

ajaxTest();

The above code should work, since the return json itself is a json and no need to parse it to json anymore.

Call JSON data from External file using Ajax

Change your file type to json and dataType to "json"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
$(document).ready(function() {

    $('#click').click(function() {
        $.ajax({
            url: "json.json",
            method: "GET",
            dataType: 'json',
             success: function(result){
                  console.log(result);
             },
             error:function() {
                 alert("Error")                  
             }
        });
    });
});
</script>

how to use ajax to get a json file in github

Since you have included dataType:'json', in your request, jQuery will validate the returned JSON. In this case, the returned JSON has a semi-colon at the end of the body which is not valid JSON.

 {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"
};

Remove the semi-colon to prevent the error handler from being called.

Using jQuery and Ajax to access JSON file

You can use $.ajax function:

$.ajax({
   dataType: "json",
   url: 'url here',
   data: data,
   success(response) {
      console.log(response);
   }
});

Or use shorthand for that:

$.getJSON('url here', function(response) {
   console.log(response);
});

Either one is fine

---

Related Topics