CODEWITHSUNDEEP
javascriptjsond3.js
Daniel Tesfaye
Daniel Tesfaye

Reputation: 81

D3 how to properly get the key value INSIDE of a json object

I am trying to generate my column headers based on the key value of the returned json object. However it is returning as [0,1] rather than [key[1],key[2]].

This is my json data and I'm trying to use D3 to get the key's of this object (which is "Label", "Count" for example) as my column headers rather than inserting it statically. 

[
  {
  "Label": "External-Partner-Induced",
  "Count": 9
  },
{
 "Label": "Null",
 "Count": 1
},
{
 "Label": "FCTS-Induced",
 "Count": 66
},
{
 "Label": "EI-Partner-Induced",
 "Count": 78
 }
]

Here is my d3 code:

d3.json('dataQualityIssuesCategory.json', function (error,data) {

    function tabulate(data, columns) {
    var table = d3.select('body').append('table')
    var thead = table.append('thead')
    var tbody = table.append('tbody');

    // append the header row
    thead.append('tr')
      .selectAll('th')
      .data(columns).enter()
      .append('th')
        .text(function (column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll('tr')
      .data(data)
      .enter()
      .append('tr');


   // create a cell in each row for each column
    var cells = rows.selectAll('td')
      .data(function (row) {
        return columns.map(function (column) {
          return {column: column, value: row[column]};
        });
      })
      .enter()
      .append('td')
        .text(function (d) { return d.value; });
     return table;
     }

    // render the table
    tabulate(data, [d3.keys(data)[0], d3.keys(data)[1]]); // 2 column table
});

The tabulate function is where I am trying to get my key fields for the column headers but the code above seems to be getting the entire object instead of the value INSIDE. Example: [0,1] as column headers instead of [Label, Count] example:

Upvotes: 1

Views: 3569

Answers (1)

Gilsha
Gilsha

Reputation: 14591

Please note that data is an array of objects and not an object. So to get the keys of an object, you should apply d3.keys function on one of the objects in the array. Like this - 

tabulate(data, d3.keys(data[0])); //data[0] is an object, applying d3.keys(data[0]) will return [Label, Count]


var data = [{
    "Label": "External-Partner-Induced",
    "Count": 9
  },
  {
    "Label": "Null",
    "Count": 1
  },
  {
    "Label": "FCTS-Induced",
    "Count": 66
  },
  {
    "Label": "EI-Partner-Induced",
    "Count": 78
  }
];

function tabulate(data, columns) {
  var table = d3.select('body').append('table')
  var thead = table.append('thead')
  var tbody = table.append('tbody');

  // append the header row
  thead.append('tr')
    .selectAll('th')
    .data(columns).enter()
    .append('th')
    .text(function(column) {
      return column;
    });

  // create a row for each object in the data
  var rows = tbody.selectAll('tr')
    .data(data)
    .enter()
    .append('tr');


  // create a cell in each row for each column
  var cells = rows.selectAll('td')
    .data(function(row) {
      return columns.map(function(column) {
        return {
          column: column,
          value: row[column]
        };
      });
    })
    .enter()
    .append('td')
    .text(function(d) {
      return d.value;
    });
  return table;
}
// render the table
tabulate(data, d3.keys(data[0]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Upvotes: 1

Related Questions