jquery datatables nested values json

Question

I want to generate a datatable with name, position, phone and email from the following json. But I don't now how to access the name and the nested value. Changing the json is not possible.

JSON:

{
  "key1" : "somevalue",
  "key2" : "somevalue2",
  "contacts" : {
    "John Doe" : {
      "position" : "CEO",
      "phone" : "1234-5678-0",
      "email" : "[email protected]"
    },
    "Elvis Presley" : {
      "position" : "Singer",
      "phone" : "0234-5678-0",
      "email" : "[email protected]"
    },
    "Albert Einstein" : {
      "position" : "Thinker",
      "phone" : "0000-8888-0",
      "email" : "[email protected]"
    }
}

RESULT:

+-----------------+----------+-------------+---------------------+
| NAME            | POSITION | PHONE       | EMAIL               | 
+-----------------+----------+-------------+---------------------+
| John Doe        | CEO      | 1234-5678-0 | [email protected]    | 
+-----------------+----------+-------------+---------------------+
| Elvis Presley   | Singer   | 0234-5678-0 | [email protected]    | 
+-----------------+----------+-------------+---------------------+
| Albert Einstein | Thinker  | 0000-8888-0 | [email protected] | 
+-----------------+----------+-------------+---------------------+

If is IS JSON, it is a string, how do you parse it? If it is simply a JavaScript Object, then that is another thing. Please clarify. — Mark Schultheiss
– Mark Schultheiss, Commented May 31, 2016 at 20:50

Gyrocode.com · Accepted Answer · 2016-05-31 20:45:24Z

2

You can manipulate the data using ajax.dataSrc option.

For example:

var table = $('#example').DataTable({
    ajax: {       
       url: 'https://api.myjson.com/bins/4nnmy',
       dataSrc: function(json){
          var data = [];
          for(var contact_name in json.contacts){
             var contact = json.contacts[contact_name];
             data.push([
                contact_name,
                contact['position'],
                contact['phone'],
                contact['email']
             ]);                 
          }

          return data;
       }
    }
});

See this jsFiddle for code and demonstration.

answered May 31, 2016 at 20:45

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

Comments

dyagmin · Accepted Answer · 2016-05-31 20:28:27Z

0

If you have the variable named data, then you can access data.contacts, and from there you can do this:

for(var contact in data.contacts) {
    if(data.contacts.hasOwnProperty(contact)) {
        // Do whatever with data.contacts[contact].position
        // Do whatever with data.contacts[contact].phone
        // Do whatever with data.contacts[contact].email
    }
}

answered May 31, 2016 at 20:28

dyagmin

3043 silver badges6 bronze badges

Comments

Mateen Kajabadi · Accepted Answer · 2016-05-31 20:43:46Z

0

Example : https://jsfiddle.net/9aLvd3uw/204/

Html :

<table>
<thead>
  <tr>
    <th>NAME</th>
    <th>POSITION</th>
    <th>PHONE</th>
    <th>EMAIL</th>
  </tr>
</thead>
<tbody id="myTbody">

</tbody>
</table>

js :

var data = {
  "key1" : "somevalue",
  "key2" : "somevalue2",
  "contacts" : {
    "John Doe" : {
      "position" : "CEO",
      "phone" : "1234-5678-0",
      "email" : "[email protected]"
    },
    "Elvis Presley" : {
      "position" : "Singer",
      "phone" : "0234-5678-0",
      "email" : "[email protected]"
    },
    "Albert Einstein" : {
      "position" : "Thinker",
      "phone" : "0000-8888-0",
      "email" : "[email protected]"
    }
}};
var contacts = data.contacts;
var string = '';
for (name in contacts){
 string += '<tr><td>' +name + '</td><td>' +  contacts[name].position + '</td><td>' + contacts[name].phone + '</td><td>' +  contacts[name].email + '</td></tr>' ;
}
$("#myTbody").html(string);

answered May 31, 2016 at 20:43

Mateen Kajabadi

3,6741 gold badge19 silver badges21 bronze badges

1 Comment

MDeuerlein Over a year ago

Thank you but this is no solution for jquery datatables. see datatables.net

Collectives™ on Stack Overflow

jquery datatables nested values json

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related