Filter JSON Data using Keys

2,000 views
Skip to first unread message

VJAY AROCKIASAMY

unread,
Mar 7, 2016, 12:02:44 PM3/7/16
to d3-js
Hi,

I have a use case to create a Grouped Bar chart with dynamic JSON Data.

The below mentioned example is having the static data and they are filtering the keys using the data in the first row of the JSON Data.

https://bl.ocks.org/mbostock/3887051


For EX:
 var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
Dynamic JSON returned from the WEB API:
var datafromDB = [{ "PAG": "Enterprise Computing", "Business Requirements": 1 }, { "PAG": "FACT", "Business Requirements": 1, "Change Impact Document": 1, "High Level Design": 2, "Low Level Design": 1 }, { "PAG": "ISG Product Operations", "Low Level Design": 1 }, { "PAG": "WMT Tech PQM", "High Level Design": 1 }];

In the dynamic JSON that is returned i don't have common static columns in the response.

if i use the below mentioned code i will only get Business Requirements from data[0] which i don't want.

I need to get the elements from the row which has similar to FACT in the above response(So i will get Business Requirements,Change Impact,High Level Design and Low Level Design]


var ageNames = d3.keys(data[0]).filter(function (key) {
                    return key !== "PAG";
                });

So i looked into the below example but i need to filter my keys not my Data.

http://stackoverflow.com/questions/31839929/data-keyfunction-filter-always-returning-first-element

Please help how can i achieve this.


Joe Keohan

unread,
Mar 8, 2016, 11:15:46 AM3/8/16
to d3-js
Vjay,

I was able to extract the keys for the object that contains the PAG: FACT and filter out PAG using the following code.  Since this object contains all the keys your looking it should work. 

Here is a working jsfiddle and the code is below.  I'm guessing there might be a more concise way to work this but this is the closest I could get for now. 

var key = d3.values(datafromDB.filter(function(d) { return d["PAG"] === "FACT" } ))
var set = d3.set(key.map(function(d) { return d3.keys(d) } ) ) 
var allVals = set.values()[0].split(",").filter(function(d) { return d != "PAG"} )  

Joe

VJAY AROCKIASAMY

unread,
Mar 16, 2016, 12:39:32 PM3/16/16
to d3-js
Joe,

Thanks for your time and response. The problem I am facing is the values returned from my DB using Web API.

In the sample that you pasted is having the hardcode value as FACT. But in my case I will know only at run time which PS has maximum artifact elements.

For ex: This time FACT has 4 elements like HLD,LLD,BRD,CID etc. But next time I may get a different PAG which has 6 elements in the JSON response.

So the elements are not constant for each PAG.So I need to get the PAG which has maximum elements in it.Please help.

Output from Stored Proc:

PAG DocumentName Count
Institutional Wealth Services Business Requirements 1
Institutional Wealth Services Change Impact Document 1
WM Operations Change Impact Document 1
FACT High Level Design 1
WM Operations High Level Design 2
WM Operations Low Level Design 1
Advisory Platforms & Solutions MAC Reviews 1
FACT MAC Reviews 2





On Monday, March 7, 2016 at 12:02:44 PM UTC-5, VJAY AROCKIASAMY wrote:

Joe Keohan

unread,
Mar 18, 2016, 9:31:25 AM3/18/16
to d3-js
Vjay,

I created a new jsfiddle and added a function that will parse the db array and return the obj with the most keys.  d3.keys is then used to filter out PAG and return the remain keys.  I believe this is what you were asking for.

Joe
Reply all
Reply to author
Forward
0 new messages