Understanding how to capture the data from an AJAX call

Question

I have an AJAX call I am using to grab some data from a DB.

$.ajax({
    url: URL + '/main/noc/html_forms/query.cfm',
    type: 'GET',
    dataType: 'json',
    data: {
        dataset: 'Users'
    },
    async: false,
    timeout: 5000,
    cache: false,
    success: function(data) {            
        var result = data.result;
        console.log(result);
    }
});

I can see from the console that the data is successfully retrieved, except that I can't print this data to a DOM ID element. Even if I do a document.write(result); the text that is displayed on the screen is

[object Object],[object Object],[object Object]

Again, the data is retrieved successfully because I can see it, I just can't get at it.

I know this is probably a silly question and it'll end up being something I can learn in a 101 class, but can someone explain what is happening here and how I can get at my data?

*"except that I can't print this data to a DOM ID element"* You have an array of objects. What do you expect the output to be? In the end you need to convert the array to a string or DOM elements. How to do that depends on how you want to display the data. JavaScript / the DOM doesn't know how the data should be displayed, you have to tell it. Accessing the data is easy: `data[0].user_name` access the `user_name` of the first object in the array. Potentially a duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) — Felix Kling, Feb 17 '17 at 05:26
`async: false,` + `timeout: 5000,` suggests you think this call could take up to 5 seconds to complete! not very use friendly at all — Jaromanda X, Feb 17 '17 at 05:34

m87 · Accepted Answer · 2017-02-17T05:57:52.300

In your posted screenshot it seems like you are getting the result from the AJAX call as a form of Array. So, to access its data you should probably have to do something like... document.write(result[0].user_name) or

 $.ajax({
     url: URL + '/main/noc/html_forms/query.cfm',
     type: 'GET',
     dataType: 'json',
     data: {
         dataset: 'Users'
     },
     async: true,
     cache: false,
     success: function(data) {
         var result = data.result;
         for (var i = 0; i < result.length; i++) {
             document.write(result[i].user_name);
         }
         console.log(result);
     }
 });

Hope this helps.

score 1 · Answer 2 · answered Feb 17 '17 at 05:31

1

Your Code Is Fine but on the success it is returning array of object then you have to modify your code like this

 $.ajax({
url: URL + '/main/noc/html_forms/query.cfm',
type: 'GET',
dataType: 'json',
contentType:'application/json;charset=utf-8',
data: {
    dataset: 'Users'
},
async: false,
timeout: 5000,
cache: false,
success: function(data) {            
   alert(data[0].user_name);
    console.log(result);
}
});

answered Feb 17 '17 at 05:31

Amit Yadav

481
3
11

`Your Code Is Fine` - despite the deprecated synchronous request - of course :p – Jaromanda X Feb 17 '17 at 05:32

score 0 · Answer 3 · answered Feb 17 '17 at 05:52

success: function(data) {     
           $.each(data,function(index,obj)
           {
               console.log('object ' + index);
               $.each(obj,function(key,value)
               {
                   console.log(key + ':' + value);
               });       
           });
    }

You are getting an array of objects from server. You cannot directly print that. You need to iterate through this array for printing the values. For this you can use $.each jquery function to first iterate through the array of object and then again to iterate through all the key-value pairs of each object. You can read about $.each function here

Understanding how to capture the data from an AJAX call

3 Answers3