Nested JSON string to Data Table

Question

Please help. I'm unable to match JSON parsed values to customer name using Data tables. I was able to populate table column with contact info, but parsed data is identical for both accounts in the table created by code shown. Is there a better way to loop through the data so it displays correctly.

I've seen a few examples of doing this with a simple table, but I would like to keep the sorting capability of Data Tables if possible. Any help will be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Table 01</title>
</head>
<body>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tableId" class="table table-condensed responsive"></table>

</body>
<script>

    var data01 = [
  {
  "name": "EXAMPLE Mickey",
  "due": "2018-11-22T19:00:00.000Z",
  "labels": [
    {
    "name": "Salesperson_1",
    "color": "green"
    }
    ],
  "pluginData": [
          {
          "value": "{\"billContact\":\"Mickey Mouse\",\"billCompany\":\"MM Clubhouse\"}",
          "access": "shared"
          }
      ]
  },
  {
  "name": "EXAMPLE Carl",
  "due": "2018-11-25T19:00:00.000Z",
  "labels": [
    {
    "name": "Salesperson_2",
    "color": "yellow"
    }
    ],
  "pluginData": [
          {
          "value": "{\"billContact\":\"Carl Grimes\",\"billCompany\":\"Rick's Group\"}",
          "access": "shared"
          }
      ]
  }
];


$('#tableId').DataTable({
  data: data01,
  "columns": [
    {"data": "name"},
    {"data": "due"},
    {"data": "labels.0.name"},
    {"data": "pluginData.0.value"},  
    {"data": function(){

      for (var i=0; i < data01.length; i++){
        var values = data01[i].pluginData[0].value;


        var parsedVal = JSON.parse(values);

        var contact = parsedVal.billContact;      

        return contact;

        //console.log(contact);
      }
    }}
  ]
});

</script>


</html>

flappix · Accepted Answer · 2018-11-27 18:26:42Z

1

When you pass a function to a column, an argument is passed to that function which represents one entry of your data. So there is no need to iterate over your data by yourself, jQuery is doing that for you.

$('#tableId').DataTable({
  data: data01,
  "columns": [
    {"data": "name"},
    {"data": "due"},
    {"data": "labels.0.name"},
    {"data": "pluginData.0.value"},  
    {"data": function (row){

      let values = row.pluginData[0].value;

        let parsedVal = JSON.parse(values);

        let contact = parsedVal.billContact;      
        return contact;
    }}
  ]
});

If you do the iteration by yourself, the function will terminate at the return statement. So everytime the function is called it just see the first entry and return it and stop at that point.

answered Nov 27, 2018 at 18:26

flappix

2,25919 silver badges34 bronze badges

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

1 Comment

Michael Hintz Over a year ago

Thank You flappix! This works perfectly and is simpler than what I had.

Collectives™ on Stack Overflow

Nested JSON string to Data Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related