CODEWITHSUNDEEP
javascriptjqueryjson
DarioBB
DarioBB

Reputation: 663

How to read json data with JavaScript or jQuery

I'm getting this response when executing upload button from my page (I'm using jQuery File Upload).

readyState: 4
responseText: {"files":[{"name":"MY_PICTURE.JPG","size":79362,"type":"image\/jpeg","url":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/files\/55_ads_1_preuzmi.jpg","mediumUrl":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/files\/medium\/55_ads_1_preuzmi.jpg","thumbnailUrl":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/files\/thumbnail\/55_ads_1_preuzmi.jpg","deleteUrl":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/index.php?file=55_ads_1_preuzmi.jpg","deleteType":"DELETE"}]}
responseJSON: [object Object]
status: 200
statusText: OK

I just want to grab name key value, nothing else I do not need. I'm stuck with reading name field value with title "name" (I want to grab this: MY_PICTURE.JPG). How can I grab it with JavaScript/jQuery?

Upvotes: 0

Views: 58

Answers (2)

anmarti
anmarti

Reputation: 5143

Hope this helps you. The following will print all properties of the file objects.

HTML markup to print json object values

<ul id="list"></ul>

You can use Object.Keys() to get the properties of a javascript object.

Script

var jsonString = '{"files":[{"name":"MY_PICTURE.JPG","size":79362,"type":"image\/jpeg","url":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/files\/55_ads_1_preuzmi.jpg","mediumUrl":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/files\/medium\/55_ads_1_preuzmi.jpg","thumbnailUrl":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/files\/thumbnail\/55_ads_1_preuzmi.jpg","deleteUrl":"https:\/\/www.mysite.com\/lib\/plugins\/jQuery-File-Upload-9.11.2\/server\/php\/index.php?file=55_ads_1_preuzmi.jpg","deleteType":"DELETE"}]}';

var myData = $.parseJSON(jsonString);
$(document).ready(function() {
    var $list = $('#list');
    $.each(myData.files, function(i,v) { // Iterate over the files collection
         var keys = Object.keys(v);
        $.each(keys, function(i,g){ // Iterate over the properties of each file object
               $('<li>' + '<b>' +  g + '</b>' +  " - "  + v[g] +  '</li>').appendTo($list);
              
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<ul id="list"></ul>

Upvotes: 0

FrancoisBaveye
FrancoisBaveye

Reputation: 1902

You can use jQuery.parseJSON()

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

With your example you can get the values like so :

for (var i in obj.files){
    console.log(obj.files[i]); // Here is the whole object
    console.log(obj.files[i].name); // Here is the name of the object
}

If you only have 1 entry, use the code that Blazemonger put in the comments of this answer :)

Upvotes: 1

Related Questions