How to retrieve value from callback response array in javascript

Question

I tried to take id file from callback response of google drive uploader. The code I use is like this:

function handleFileSelect(evt) {
           document.getElementById("info_upload").innerHTML = "Sedang memproses file untuk diupload...";
         evt.stopPropagation();
         evt.preventDefault();
         var files = evt.dataTransfer.files; // FileList object.

         var output = [];
         for (var i = 0, f; f = files[i]; i++) {
             var uploader = new MediaUploader({
                 file: f,
                 token: accessToken,
                 onComplete: function(data) {
                    document.getElementById('result').value = data['id'];
                 }
             });
             uploader.upload();
         }
       }

I've tried all the ways I know to take the id file but it's still not working. I have tried data.id or data[array index].

This is all of Callback response array value.

{
 "kind": "drive#file",
 "id": "1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-",
 "etag": "\"rOX0fJzgyZU36BYOEcGKIYxPCtI/MTUxMjU1MzQwMzA0Mw\"",
 "selfLink": "https://www.googleapis.com/drive/v2/files/1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-",
 "webContentLink": "https://drive.google.com/uc?id=1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-&export=download",
 "alternateLink": "https://drive.google.com/file/d/1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-/view?usp=drivesdk",
 "embedLink": "https://drive.google.com/file/d/1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-/preview?usp=drivesdk",
 "iconLink": "https://drive-thirdparty.googleusercontent.com/16/type/image/png",
 "thumbnailLink": "https://lh5.googleusercontent.com/D_wWrHgdhRw6fnLaG0w2_nczIHxP1_gzD1-0N47_nlLZk2dXCLPP1GPj6SN37TQHNvvsG54zJSQ=s220",
 "title": "1.png",
 "mimeType": "image/png",
 "labels": {
  "starred": false,
  "hidden": false,
  "trashed": false,
  "restricted": false,
  "viewed": true
 },
 "createdDate": "2017-12-06T09:43:23.043Z",
 "modifiedDate": "2017-12-06T09:43:23.043Z",
 "modifiedByMeDate": "2017-12-06T09:43:23.043Z",
 "lastViewedByMeDate": "2017-12-06T09:43:23.043Z",
 "markedViewedByMeDate": "1970-01-01T00:00:00.000Z",
 "version": "2",
 "parents": [
  {
   "kind": "drive#parentReference",
   "id": "0ALL4ishr4YNbUk9PVA",
   "selfLink": "https://www.googleapis.com/drive/v2/files/1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-/parents/0ALL4ishr4YNbUk9PVA",
   "parentLink": "https://www.googleapis.com/drive/v2/files/0ALL4ishr4YNbUk9PVA",
   "isRoot": true
  }
 ],
 "downloadUrl": "https://doc-04-28-docs.googleusercontent.com/docs/securesc/faqhpav83cnunr53av2ik9r00tmicagg/7fvl938cmksp83dk43pp0oo5qiseh3sr/1512547200000/13075436128251877983/13075436128251877983/1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-?e=download&gd=true",
 "userPermission": {
  "kind": "drive#permission",
  "etag": "\"rOX0fJzgyZU36BYOEcGKIYxPCtI/ZgAdmVNnouRC2sSB3efF5W7Fobk\"",
  "id": "me",
  "selfLink": "https://www.googleapis.com/drive/v2/files/1_EfEFzN4qppKGrcDK6T_SS5hdeAovFK-/permissions/me",
  "role": "owner",
  "type": "user"
 },
 "originalFilename": "1.png",
 "fileExtension": "png",
 "md5Checksum": "dd9b4aa37a7a35de368d73d002ba6bf9",
 "fileSize": "852232",
 "quotaBytesUsed": "852232",
 "ownerNames": [
  "Abdul Kahar"
 ],
 "owners": [
  {
   "kind": "drive#user",
   "displayName": "Abdul Kahar",
   "picture": {
    "url": "https://lh5.googleusercontent.com/-vsm5aHKmIJU/AAAAAAAAAAI/AAAAAAAAAY8/KIbhdHI1by4/s64/photo.jpg"
   },
   "isAuthenticatedUser": true,
   "permissionId": "13075436128251877983",
   "emailAddress": "abdulkaharumar@gmail.com"
  }
 ],
 "lastModifyingUserName": "Abdul Kahar",
 "lastModifyingUser": {
  "kind": "drive#user",
  "displayName": "Abdul Kahar",
  "picture": {
   "url": "https://lh5.googleusercontent.com/-vsm5aHKmIJU/AAAAAAAAAAI/AAAAAAAAAY8/KIbhdHI1by4/s64/photo.jpg"
  },
  "isAuthenticatedUser": true,
  "permissionId": "13075436128251877983",
  "emailAddress": "abdulkaharumar@gmail.com"
 },
 "capabilities": {
  "canCopy": true,
  "canEdit": true
 },
 "editable": true,
 "copyable": true,
 "writersCanShare": true,
 "shared": false,
 "explicitlyTrashed": false,
 "appDataContents": false,
 "headRevisionId": "0B7L4ishr4YNbRDRYRXZhVUJlM2VtSEh2ai9JVlR3NnFZbkJFPQ",
 "imageMediaMetadata": {
  "width": 1365,
  "height": 719,
  "rotation": 0
 },
 "spaces": [
  "drive"
 ]
}

If I use data[0] then that appears only "{", the others such as data[1], data[2], and data[3] do not work.

Answer 1

It looks like you need to deserialize the JSON response to convert it from a string into an object.

onComplete: function(data) {
    data = JSON.parse(data);
    document.getElementById('result').value = data['id'];
}