How to store the JSON value fetch from a URL using JQuery?

Question

I am new to JQuery. I am trying to develop a small travel website for checking PNR. I am currently using an API provided by one of the travel company. As soon as we hit the API Url, browser displays the result in JSON format.

I am using JQuery, JS and HTML. I want to know how to store the JSON value (in string format) retrieved from hitting an API, in a variable and use it later in the script.

PS: Though I have found many answer in Stackoverflow but none of the result works. Kindly help with the appropriate value.

Sample Code: (I am using one textbox and button)

    <script>
function search_pnr(){
var pnr = $('#input_pnr').val();
var result;
var url = "http://api website/pnr"+pnr;

//Suggest the code here, to fetch the result from url and store in the variable result.

</script>

<input type="text" placeholder="Enter PNR" id ="input_pnr"/>
<input type="button" value="Search PNR" onclick="search_pnr()"/>

Below is the JSON value getting from server

{"to_station": {"lng": 77.2888291, "name": "ANAND VIHAR TERMINAL", "lat": 28.6118176, "code": "ANVT"}, "total_passengers": 1, "pnr": "6717552286", "journey_class": {"name": null, "code": "3A"}, "train": {"classes": [{"available": "N", "name": "SECOND AC", "code": "2A"}, {"available": "Y", "name": "THIRD AC", "code": "3A"}, {"available": "N", "name": "SECOND SEATING", "code": "2S"}, {"available": "N", "name": "FIRST AC", "code": "1A"}, {"available": "Y", "name": "AC CHAIR CAR", "code": "CC"}, {"available": "N", "name": "FIRST CLASS", "code": "FC"}, {"available": "N", "name": "3rd AC ECONOMY", "code": "3E"}, {"available": "N", "name": "SLEEPER CLASS", "code": "SL"}], "days": [{"code": "MON", "runs": "N"}, {"code": "TUE", "runs": "Y"}, {"code": "WED", "runs": "N"}, {"code": "THU", "runs": "Y"}, {"code": "FRI", "runs": "N"}, {"code": "SAT", "runs": "Y"}, {"code": "SUN", "runs": "N"}], "number": "22405", "name": "BGP-ANVT GARIB RATH"}, "from_station": {"lng": 86.9828131, "name": "BHAGALPUR", "lat": 25.2494829, "code": "BGP"}, "passengers": [{"booking_status": "CNF/G12/36/GN", "no": 1, "current_status": "CNF/-/0/GN"}], "reservation_upto": {"lng": 77.2888291, "name": "ANAND VIHAR TERMINAL", "lat": 28.6118176, "code": "ANVT"}, "response_code": 200, "boarding_point": {"lng": 86.9828131, "name": "BHAGALPUR", "lat": 25.2494829, "code": "BGP"}, "debit": 3, "doj": "25-08-2018", "chart_prepared": false}

Kindly also help how to read both the objects and array in the given JSON.

Do some research into using ajax. This question is really far to broad based on guidelines in the [help]. You shouldn't have any problem finding lots of ajax tutorials to get you started — charlietfl, Aug 05 '18 at 17:50

Sabyasachi Patra · Accepted Answer · 2018-08-05T18:42:46.333

1

You can use ajax to fetch the result from the url

var result;
var url = "http://api website/pnr"+pnr;
$.ajax
({
    url: url,
    type: 'GET',
    dataType: 'json',
    success: function(data)
    {
        result = data;
        alert(JSON.stringify(data));
    }
});

edited Aug 05 '18 at 18:42

answered Aug 05 '18 at 17:56

Sabyasachi Patra

650
4
12

what if I want to show the var result in an alert box? – Md Kamran Azam Aug 05 '18 at 18:12
@MdKamranAzam, Edited the answer. – Sabyasachi Patra Aug 05 '18 at 18:15
Tried.. but its showing [object Object]. I want to show the complete JSON in alert box. – Md Kamran Azam Aug 05 '18 at 18:37
@MdKamranAzam your original question was about fetching the result, right? But you marked some other answer as accepted. – Sabyasachi Patra Aug 06 '18 at 00:59
I saw your edited code after the one I saw using stringify. – Md Kamran Azam Aug 06 '18 at 06:24

score 1 · Answer 2 · answered Aug 05 '18 at 17:57

You just need to parse JSON and how to read each object. This should give you good start

$.ajax({
    type: "GET",
    url: "http://api_website/pnr"+pnr,
    data: data,
    success: function(resultData) { 
        console.log(resultData);

        var to_station = resultData.to_station;
        var trains = resultData.train;
        var passengers = resultData.passengers;

        alert("Station Name: "to_station.name);
        alert("Passengers: "passengers.booking_status);


    },
    error(function() { 
        alert("Something went wrong"); 
    }
});

You can read more bout how to read JSON here.

score 0 · Answer 3 · answered Aug 05 '18 at 17:58

0

$.ajax({
  method: "GET",
  url: url
})
  .done(function( data ) {
    console.log(data)
    // see what properties you need from data object and save it to variable
    var data = data
  });

answered Aug 05 '18 at 17:58

Etomanon

77
1
7

score 0 · Answer 4 · answered Aug 05 '18 at 17:58

First thing,

Use a javascript file....API calls are better off done in a js file rather than in a script tag. Second thing, if you want to store it in a json format, you can store it in a value like the way you have declared your url variable. Since, you are fetching the data, I'm assuming this is a get request, you can find more information about them in the following links -

Also, if the data isn't very sensitive, you can store it in the local storage of your browser, so that you can access it later on in other web pages as well.

In your current json data, I would say that if you declare it to a variable say apiResult Your to_station would be apiResult.to_station, the lng value would be apiResult.to_station.lng and so on.

score 0 · Answer 5 · answered Aug 05 '18 at 18:01

Hope any of this helps, and good luck.

Everyone already added the AJAX examples, so I will leave that out.

So for reading the objects, you just have to parse what you need through various means, if you know what the object looks like and exactly what you need you can use dot notation. If you are looking to grab things more dynamically you can using higher order functions or for loops as well as Object prototypes example getting the entries (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)

You might consider using localStorage for storing the information depending on what you are using it for which is a built-in Web API here is MDN's definition

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

score 0 · Answer 6 · answered Aug 05 '18 at 18:02

You may want to use AJAX. You have to be sure how the server will retrieve the data. If it is in a JSON format do:

<script>
    function search_pnr(){
        var pnr = $('#input_pnr').val();
        var result;
        var url = "http://api website/pnr"+pnr;
        $.getJSON( url, function( data ) {
            result = data;
            $.each( data, function( key, value ) {
                // whatever with keys and values if needed
            }
        );

    }
</script>

Ref w3 Schools

JQuery official website

score -1 · Answer 7 · answered Aug 05 '18 at 17:57

-1

All current browsers have native JSON support built in. So as long as you're not dealing with prehistoric browsers like IE6/7 you can do it just as easily as that:

var j={"name":"binchen"};
JSON.stringify(j); // '{"name":"binchen"}'

For more info kindly visit link

answered Aug 05 '18 at 17:57

Hameed

51
4
16

Exactly, what I was searching for.Thanks – Md Kamran Azam Aug 05 '18 at 18:44

How to store the JSON value fetch from a URL using JQuery?

7 Answers7