Print Multidimensional Array received from Ajax Response

Question

I have submitted my form using following code

$(document).ready(function() {
     $.ajax({
        type: "POST",
        url: "https://cors-anywhere.herokuapp.com/https://api.digitallocker.gov.in/public/oauth2/1/files/issued",
        headers:{
            'Authorization' : 'Bearer '+$('#access_token').val()
        },

        dataType: "json", 
        success: function (data) {
        console.log(data);


        }, 
        error: function(xhr, status, error) {
              alert(xhr.responseText);
        }
    });
     });

and I received the following output in my console.

{items: Array(6), resource: "D"}
items: Array(6)
0:
date: "2x-x-xxx"
description: "Aadhaar Card"
doctype: "ADHAR"
issuer: "Aadhaar, Unique Identification Authority of India"
issuerid: "in.gov.uidai"
mime: "application/pdf"
name: "Aadhaar Card"
parent: ""
size: ""
type: "file"
uri: "in.gov.uidai-ADHAR-xxxxxxx"
__proto__: Object

I want to print the above output as Table in my HTML.

I have tried so far

jQuery(data).each(function(i, obj) {
        jQuery('#doc_list').append("<tr><td>"+obj.items['date'] + ' </td><td>' + obj.description + "</td></tr>");
        });

Jeto · Accepted Answer · 2019-11-24 10:33:14Z

2

It seems like you want to loop over data.items, not just data.

After a bit of refactoring, this becomes:

data.items.forEach(item => {
  $('#doc_list').append(
    $('<tr>')
      .append($('<td>').text(item.description))
      .append($('<td>').text(item.date))
      // append other columns as required
  );
});

Demo:

const dataJson = `
{
  "items": [{
    "date": "2x-x-xxx",
    "description": "Aadhaar Card",
    "doctype": "ADHAR",
    "issuer": "Aadhaar, Unique Identification Authority of India",
    "issuerid": "in.gov.uidai",
    "mime": "application/pdf",
    "name": "Aadhaar Card",
    "parent": "",
    "size": "",
    "type": "file",
    "uri": "in.gov.uidai-ADHAR-xxxxxxx"
  }, {
    "date": "3x-x-xxx",
    "description": "Somethingelse Card",
    "doctype": "SOMETHINGELSE",
    "issuer": "Somethingelse, Unique Identification Authority of India",
    "issuerid": "in.gov.uidai",
    "mime": "application/pdf",
    "name": "Somethingelse Card",
    "parent": "",
    "size": "",
    "type": "file",
    "uri": "in.gov.uidai-SOMETHINGELSE-xxxxxxx"
  }
]}`;

const data = JSON.parse(dataJson);

data.items.forEach(item => {
  $('#doc_list').append(
    $('<tr>')
      .append($('<td>').text(item.description))
      .append($('<td>').text(item.date))
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="doc_list">
</table>

answered Nov 24, 2019 at 10:33

Jeto

15k2 gold badges39 silver badges50 bronze badges

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

2 Comments

Cool Perfectionist Over a year ago

How do I assign my return data array to dataJson

Jeto Over a year ago

This is just for the demo (to fake a webservice call). You should just need the part with the forEach.

Collectives™ on Stack Overflow

Print Multidimensional Array received from Ajax Response

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related