save json data from a localhost webservice with javascript

Question

I have json data in the format of the following:

{ "david" :12, "john": "21", "kevin": [{"address":"friendly"}]}}

this data is saved in my localhost web, in the URL : localhost8080/example/search?data=1

I want to use javascript/jQuery to save this data in a variable, and then parse the information i need later, I looked up for some ways to do this, I found the following:

$(document).ready(function () {
    $.ajax({ 
        type: 'GET', 
        url: 'localhost8080/example/search?data=1', 
        data: { get_param: 'value' }, 
        success: function (data) { 
            var names = data
            $('#a_div').html(data);
        }
    });
});

What is the line data: { get_param: 'value' } doing? I dont want to get certain data, i want to save the entire json data and save it as a var like the following:

var example1 = { "david" :12, "john": "21", "kevin": [{"address":"friendly"}]}}

as my result. How should I do this?

score 1 · Answer 1 · edited May 23 '17 at 12:05

First off, take a good look at jQuery's ajax function, specifically the data attribute (here).
The get_param is referring to the GET request, not to the verb of receiving.

To answer you question I'll split the answer to two options I see currently:

1) To save the data in a databse.
(Assuming you're using php)
I would rewrite the ajax as follows:

var exampleJSON = { "david" :12, "john": "21", "kevin": [{"address":"friendly"}]}}    
$.ajax({ 
            type: 'POST', 
            url: 'localhost8080/example/saveData.php', // You need to create this page
            data: { data: exampleJSON }, 
            success: function (data) { 
                alert("Completed saving data")
            }
        });

Then in saveData.php
You can get the data sent by jQuery using: $_POST['data']
You will then process the information as you wish (inserting to a databse, cookie etc...)

2) To save via local-storage:
(Note: this will not work with old browsers) Read: Storing Objects in HTML5 localStorage

I hope this helps you

Niccolò Campolungo · Accepted Answer · 2013-06-15T22:25:45.997

1

First of all, your JSON is invalid, it has a } at the end that should not be there.

data: { get_param: 'value' },

This is passing the POST data named get_param with value value. If you don't need to pass the data to the request you can safely remove it.

var dataSaved;
$(document).ready(function () {
    $.ajax({ 
        type: 'GET', 
        url: 'localhost8080/example/search?data=1',
        success: function (data) { 
            dataSaved = JSON.parse(data);
            $('#a_div').html(data);
        }
    });
});

By doing this you will save the data retrieved with the request to the dataSaved variable which will be an object obtained by parsing the JSON via JSON.parse. Then you can reuse it whenever you want.

edited Jun 15 '13 at 22:25

answered Jun 15 '13 at 17:30

Niccolò Campolungo

11,824
4
32
39

since i dont need it, data: { get_param: 'value' }, can be removed ? You kept it in in your code. – PhoonOne Jun 15 '13 at 18:47
Yes. As I said, you can safely remove it. Updated. – Niccolò Campolungo Jun 15 '13 at 22:26

score 1 · Answer 3 · answered Jun 15 '13 at 17:30

The data property does not specify which data you get from the server, it specifies the query parameters which get appended to the url you're accessing (for a GET anyway). (see jQuery.ajax)

You can use either:

$.ajax({ 
    type: 'GET', 
    url: 'localhost:8080/example/search?data=1',
    success: function (data) { ... }
});

or

$.ajax({ 
    type: 'GET', 
    url: 'localhost:8080/example/search',
    data: {data: 1},
    success: function (data) { ... }
});

These will both result in a request to localhost:8080/example/search?data=1.

Since you want to save JSON data in a variable, you might consider using jQuery.getJSON() (see jQuery.getJSON).

save json data from a localhost webservice with javascript

3 Answers3