Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jquery - Parse JSON with jQuery Example
/********************************** example **************************************/
var base_url = 'http://people.cs.uct.ac.za/~swatermeyer/VulaMobi/';
function example()
{
var response = "";
var form_data = {
username: username,
password: password
};
$.ajax({
type: "POST",
url: base_url + "ajax.php?test/json",
data: form_data,
success: function(response)
{
/*response = '[{"Language":"jQuery","ID":"1"},{"Language":"C#","ID":"2"},
{"Language":"PHP","ID":"3"},{"Language":"Java","ID":"4"},
{"Language":"Python","ID":"5"},{"Language":"Perl","ID":"6"},
{"Language":"C++","ID":"7"},{"Language":"ASP","ID":"8"},
{"Language":"Ruby","ID":"9"}]'*/
console.log(response);
var json_obj = $.parseJSON(response);//parse JSON
var output="<ul>";
for (var i in json_obj)
{
output+="<li>" + json_obj[i].Language + ", " + json_obj[i].ID + "</li>";
}
output+="</ul>";
$('span').html(output);
},
dataType: "json"//set to JSON
})
}
@zuch

This comment has been minimized.

@tatthien

This comment has been minimized.

Copy link

commented Jul 24, 2013

Thanks. It's solve my problem :)

@dianneanes

This comment has been minimized.

Copy link

commented Jul 25, 2013

hi, i would like to know how can i go about getting this result: (Main Category: Shoes, Sub_Category1:Women, Sub_Category2: Sandals, Sub_Category3: Slide) from this json data example "Shoes>Women>Sandals>Slide". I need to separate each category and show it in the menu bar. thanks.

@zuch

This comment has been minimized.

Copy link
Owner Author

commented Aug 14, 2013

@dianneanes

Check out this gist: Populate List with JSON using jQuery

Hope it helps :)

@codeforgeek

This comment has been minimized.

Copy link

commented Jul 18, 2014

Thanks buddy. it works so nice.

@Wmas

This comment has been minimized.

Copy link

commented May 7, 2015

Hi Zuch,
I am breaking my head over this:
this is my json object
[
{
"number":"INV1",
"created_at":"2015-03-30 00:00:00",
"due_at":"2015-04-29",
"name":"Cleaning",
"description":"Cleaning Foam",
"quantity":"1.00",
"price":"25.00"
},
{
"number":"INV1",
"created_at":"2015-03-30 00:00:00",
"due_at":"2015-04-29",
"name":"Rolex",
"description":"Submarine",
"quantity":"1.00",
"price":"6500.00"
}
]
The format seems to me exact as the one you are using.
Unfortunately I get this error (Firebug):

"SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data"

And I can not figure out why.
Your help with this will be appreciated.

Cheers

Franco

@arjunkori

This comment has been minimized.

Copy link

commented Dec 21, 2015

Thanks friend. it works so nice for me .

@rajkumartreads

This comment has been minimized.

Copy link

commented Dec 30, 2015

Thank you Zuch! This helped me!

@Ultimade

This comment has been minimized.

Copy link

commented Mar 17, 2016

Hi Zuch!

I tried this code but I got this error.

Uncaught ReferenceError: identi is not defined

here is my code which not work:
var form_data = { identi: identi, name: name, country: country, lotnumber: lotnumber, city: city, street: street, street_number: street_number, email: email };
And here's your code, which is the same structure as mine:
var form_data = { username: username, password: password };

So my question is: How can work it for you or what's the problem whit my code?

@findela

This comment has been minimized.

Copy link

commented Jun 4, 2016

I am facing problem with similar like example but little different -


[           
     {
             "Regions":"region 1",
             "2010-11":"0.00",
             "2011-12":"0.00",
             "2012-13":"0.00",
             "2013-14":"0.00",
             "2014-15":"0.00",
             "2015-16":"0.00",
             "2016-17":"14588.00"
   },
   {
             "Regions":"region 2",
             "2010-11":"3640.00",
             "2011-12":"1500.00",
             "2012-13":"0.00",
             "2013-14":"0.00",
             "2014-15":"0.00",
             "2015-16":"0.00",
             "2016-17":"0.00"
   }
]

Where the years are coming dynamically and I can't loop through key using dot(.) for accessing value, I am implementing ajax to fetch data as json response,as far I have tried out solution like this. What is the way to display data using jquery's $.each() -

$.ajax({
            type : "GET",
            url : "home/fetch_regions",
            dataType: 'html',
            data : {
                param : count_val,
                '_token' : $('meta[name="csrf-token"]').attr('content'),
            },
            success : function(response) {
                var jsonObject = JSON.parse(response);
                var $el = $(".regions tbody tr");
                        $el.empty(); // remove old options
                    $.each($.parseJSON(response), function(key,obj) { //$.parseJSON() method is needed unless chrome is throwing error.
                       $el.append("<td>"+ obj[key] +"</td>");
                    }); 
            }
        });

If anybody can help me.

@destata

This comment has been minimized.

Copy link

commented Jul 26, 2016

thanks.. it's save my time

@zealsham

This comment has been minimized.

Copy link

commented Aug 3, 2016

function example()
{
    var response = "";
    var form_data = {
        username: username,
        password: password
    };

what does that part of the code does. i dont seem to understand it

@Nsengiyunva

This comment has been minimized.

Copy link

commented Sep 30, 2016

function example() { var response = ""; var form_data = { username: username, password: password };
its a jquery function called example.
var response = ""; declares a variable response which is empty.
var form_data = { username: username, password: password }; declares an object with keys and values. the string on the left hand side(username) is the key and the string on the right hand side is the value.

@jayant6592

This comment has been minimized.

Copy link

commented Dec 29, 2016

`$("#uproducti").fileinput({
        uploadUrl: "/myupload.php",
        allowedFileExtensions: ["jpg", "png", "jpeg"],
        minImageWidth: 750,
        minImageHeight: 750,
        maxFileCount: 4,
        uploadExtraData: function() {
            return {
              userid: $("#usrid").val(),
              token: $("#tokn").val(),
              productid : $("#prglid").val()
            };
        },
        dataType: "json",  
        success: function (response) {
            console.log(response);
            var json = $.parseJSON(response);//parse JSON
            alert(json.pid);
            
            $("#prid").val(json.pid);
        }
      });`

All things are working fine and i am getting data in return like {"pid":42} but i a not getting anything in success part what to do where i am wrong

@rohitmore1995

This comment has been minimized.

Copy link

commented Dec 19, 2018

hello..I have convert excel file data into JSON now i want to access that data to display it ...how can we do..
this is my code
<!doctype html>

<title>Excel to JSON Demo</title> <script src="xlsx.full.min.js"></script> <script> /* set up XMLHttpRequest */ var url = "test.xlsx"; var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { var arraybuffer = oReq.response; /* convert data to binary string */ var data = new Uint8Array(arraybuffer); var arr = new Array(); for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]); var bstr = arr.join(""); /* Call XLSX */ var workbook = XLSX.read(bstr, {type:"binary"}); /* DO SOMETHING WITH workbook HERE */ var first_sheet_name = workbook.SheetNames[0]; /* Get worksheet */ var worksheet = workbook.Sheets[first_sheet_name]; console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true})); //alert(XLSX.utils.sheet_to_json(worksheet,{raw:true})); var data = XLSX.utils.sheet_to_json(worksheet,{raw:true}); var json = JSON.parse(data); alert(json["age"]); //mkyong } oReq.send(); </script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.