How to read json data with JavaScript or jQuery

Question

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?

xhr.responseText.files[0].name ? xhr being the supposed object containing the JavaScript data you posted. If my previous expression doesn't work, you may have to parse the JSON data with JSON.parse : JSON.parse(xhr.responseText).files[0].name — John Pink
– John Pink, Commented Oct 22, 2015 at 14:17
Thanks! I've been starting to loosing my head about this! Problem was I stringified it first I see now. — DarioBB
– DarioBB, Commented Oct 22, 2015 at 14:23
'Til this day I still get this problem, don't worry. Just remember that what seems to be a JSON object can also be a string sometimes. This happens especially when you transfer objects over a network (with AJAX, XHR etc.). Now you how the conversion works : JSON.parse(json_string) // renders object and JSON.stringify(json_object) // renders string — John Pink
– John Pink, Commented Oct 22, 2015 at 14:29

FrancoisBaveye · Accepted Answer · 2015-10-22 14:21:55Z

1

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 :)

edited Oct 22, 2015 at 14:21

answered Oct 22, 2015 at 14:16

FrancoisBaveye

1,9101 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DarioBB Over a year ago

I know. Doesen't work, I can't get name. How must i spell it? Where I must put my response if using this example?

Blazemonger Over a year ago

He used a simplified example. In your case, you'd need to fetch obj.files[0].name

FrancoisBaveye Over a year ago

Use jsonviewer.stack.hu to check the structure of the JSON. You have an array called "files", containing several arrays with names, sizes, etc. In order to access a property of one of these, you have to iterate through the array. Edited my answer to show you how to parse your data.

Jill Over a year ago

after doing the var obj = jQuery.parseJson(<jsonString>) then, do a : console.log(obj) and your entire object will get printed out to the console (you can expand/contract it and explore it) and then you can see what everything is really named and its real structure. that should help.

anmarti · Accepted Answer · 2015-10-22 15:24:10Z

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>

Collectives™ on Stack Overflow

How to read json data with JavaScript or jQuery

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related