Return JSON from ajax call into HTML div

Question

I've got my javascript ajax call returning json and I'm trying to put it on the HTML page.

I use this code:

      success: function(response) {
        console.log(response);
        for (var i=0;i<response.length;++i)
        {
            $('#main').append('<div class="name">'+response[i].name+'</>');
        }
          },
          error: function(response) {
            alert(response);
          }
        });

However it seems to print json to my console just fine but I dont get anything returned to the website.

I have a div to collect it in:

<div id="main">Test</div>

Any idea where I am going wrong?

EDIT: The console log response is this:

{totalPages: 0, firstPage: true, lastPage: true, numberOfElements: 0, number: 0, …}
columns: {columnIds: Array(3)}
firstPage: true
lastPage: true
number: 0
numberOfElements: 0
oberonRequestXML: [null]
oberonResponseXML: [null]
summaryData: {totals: Array(3)}
totalElements: 0
totalPages: 0
__proto__: Object

Answer 1

As explained in comments, your JSON response is not an array -- there is no length property, so your loop does not loop. Moreover, you seem to expect an array with objects that have a name attribute. This is nowhere to be seen in the response you get.

Assuming you are calling the right JSON service, the only information you can iterate over is stored in two attributes: columns.columnIds and summaryData.totals . So you would get something , if you code it like this:

console.log(response);
for (var i=0;i<response.columns.columnIds.length;++i) {
    $('#main').append('<div class="name">'
                 + response.columns.columnIds[i] 
                 + ': '
                 + response.summaryData.totals[i] + '</div>');
}

This assumes that these values are primitive values, which is not clear from the response you got.

But again, this will not output name property values, as they do not appear in your JSON as far as is visible in your question.