how to get the encoded data by json_encode in the java script file

Question

I am encoding file data using json_encode and this is what I get when I send the encoded data in Javascript:

enter image description here

This is my php code (using codeigniter to upload a file):

$file_info = $this->upload->data();
echo json_encode($file_info);

and I use the data in my javascript file:

'onUploadSuccess' : function(file, data, response) {
      alert('The file was saved to: ' + data);
}

How can I use file_name or other strings as they are encoded?!

for example how can I use:

'onUploadSuccess' : function(file, data, response) {
  alert('The file name is: ' + file_name);
}

If you want to use the json data in javascrip, why you are uploading them and parsing with php? Do data.file_name? — idmean
– idmean, Commented Aug 15, 2013 at 20:18
Have you tried console.log(data) to see what it is? Usually it's an object. — Jack Cole
– Jack Cole, Commented Aug 15, 2013 at 20:19
@Grim & wumm I did it, but i got: The file name is: undefined — Afshin
– Afshin, Commented Aug 15, 2013 at 20:23
@JackCole, no I didn't. because I'm new to Javascript and I really don't know what to do! — Afshin
– Afshin, Commented Aug 15, 2013 at 20:24

Jack Cole · Accepted Answer · 2013-08-15 21:44:09Z

1

You have 3 variables in your response. To see what each one is when your code is executed, use console.log().

'onUploadSuccess' : function(file, data, response) {
    console.log('\n"data" variable:')
    console.log(data);
    console.log('"file" variable:')
    console.log(file);
    console.log('\n"response" variable:')
    console.log(response);
}

Now open up your javascript log (F12 in Chrome, Shift+F5 I think in firefox). The Json data should have been converted into an object. If it's in its json form, add JSON.parse(data).

Objects are the backbone of javascript. To select information in an object named data, you use data.property. So data.file_name should return "83274983279843.jpg", data.type would return the type, etc.

Edit: So after discussion in chat the issue was you didn't parse the JSON. Also I incorrectly told you to reverse the variable order.

Here is the fixed code:

'onUploadSuccess' : function(file, data, response) { 
    data = JSON.parse(data) 
    alert('The file : ' + data.file_type); 
}

edited Aug 15, 2013 at 21:44

answered Aug 15, 2013 at 20:32

Jack Cole

1,8142 gold badges25 silver badges45 bronze badges

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

8 Comments

Afshin Over a year ago

This is what I have: Object client_name: "15971_609999215698807_1118915796_n.jpg" file_ext: ".jpg" file_name: "5341fdd4b1d89985bf7e23a37f7494c9.jpg" ....

Jack Cole Over a year ago

The 3 variables, (file, data, response), do not care what they are named. Only what order they are in. So file actually contains your data, data is your file information. Change it to (data, file, response) and it should work.

Jack Cole Over a year ago

Once you change that, data.client_name should return "15971_609999215698807_1118915796_n.jpg", and data.file_ext should return ".jpg"

Jack Cole Over a year ago

I changed the console.log information so when you do it now, it's more clear what each variable is. The variable containing all the information should be called Object {~~~~~~~~}. What's the name of that variable?

Afshin Over a year ago

"data" variable:  {"file_name":"edb7e52b545ca6fccb7f0a8d83e7df1b.jpg","file_type":"application\/octet-stream","raw_name":"edb7e52b545ca6fccb7f0a8d83e7df1b","orig_name":"935823_163724623815235_533051709_n.jpg","client_name":"935823_163724623815235_533051709_n.jpg","file_ext":".jpg","file_size":39.98,"is_image":false,"image_width":"","image_height":"","image_type":"","image_size_str":""} "file" variable: Object {creationdate: Tue J ...

|

Collectives™ on Stack Overflow

how to get the encoded data by json_encode in the java script file

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related