Javascript: Array of dictionaries, get all key value pairs from one dictionairy with condition

Question

First of all, this is my first post ever here and I'm not a very advanced programmer. If I don't follow the rules of Stackoferflow, please let me know.

I'm trying to make a scatterplot (and a datamap) for my linked-views assignment using D3. on my x-axis I will have years, on the Y axis I want the life Expectancy of a certain country. The country will be a variable and passed into the function that creates the scatterplot (by clicking on the datamap).

My dataset looks as follows:

    [{"country":"Abkhazia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null,"2011":null,"2012":null,"2013":null,"2014":null,"2015":null,"2016":null},
     {"country":"Afghanistan","1995":49.4,"1996":49.7,"1997":49.5,"1998":48.6,"1999":50,"2000":50.1,"2001":50.4,"2002":51,"2003":51.4,"2004":51.8,"2005":52,"2006":52.1,"2007":52.4,"2008":52.8,"2009":53.3,"2010":53.6,"2011":54,"2012":54.4,"2013":54.8,"2014":54.9,"2015":53.8,"2016":52.72},
      etc.

My function starts like this:

function makeScatter(lifeExpectancy, healthPercGDP, country){...

I want to have an array or a dict of all the key value pairs or all the values (I think I could make both work) that belong to the country that is passed into my function (e.g. Afghanistan).

Thanks in advance!         

Solution

Given your data structure, an easy approach is just filtering the data array inside makeScatter function.

function makeScatter(country) {
    var filteredData = data.filter(d => d.country === country);
}

Here is a demo, check the console:

var data = [{
  "country": "Abkhazia",
  "1995": null,
  "1996": null,
  "1997": null,
  "1998": null,
  "1999": null,
  "2000": null
}, {
  "country": "Afghanistan",
  "1995": 49.4,
  "1996": 49.7,
  "1997": 49.5,
  "1998": 48.6,
  "1999": 50,
  "2000": 50.1,
  "2001": 50.4
}, {
  "country": "Angola",
  "1995": 59.4,
  "1996": 59.7,
  "1997": 39.5,
  "1998": 58.6,
  "1999": 60,
  "2000": 60.1,
  "2001": 60.4
}];

function makeScatter(country) {
  var filteredData = data.filter(d => d.country === country);
  console.log(filteredData);
}

makeScatter("Afghanistan")

However, there is a potential problem here: in D3, the "enter" selection has as many elements as the array you pass to the data() function. Right now, this filteredData array has just one object, meaning that you'll have only one element in the enter selection.

Thus, my advice is this: after filtering your country, transform that huge object in an array of objects (each object having a year and an expectancy property), here named countryData:

function makeScatter(country) {
    var filteredData = data.filter(d => d.country === country);
    countryData = [];
    for (var prop in filteredData[0]) {
        countryData.push({
            year: +prop,
            expect: filteredData[0][prop]
        })
    }
}

Here is the demo:

var data = [{
  "country": "Abkhazia",
  "1995": null,
  "1996": null,
  "1997": null,
  "1998": null,
  "1999": null,
  "2000": null
}, {
  "country": "Afghanistan",
  "1995": 49.4,
  "1996": 49.7,
  "1997": 49.5,
  "1998": 48.6,
  "1999": 50,
  "2000": 50.1,
  "2001": 50.4
}, {
  "country": "Angola",
  "1995": 59.4,
  "1996": 59.7,
  "1997": 39.5,
  "1998": 58.6,
  "1999": 60,
  "2000": 60.1,
  "2001": 60.4
}];

function makeScatter(country) {
  var filteredData = data.filter(d => d.country === country);
  countryData = [];
  for (var prop in filteredData[0]) {
    countryData.push({
      year: +prop,
      expect: filteredData[0][prop]
    })
  }
  console.log(countryData)
}

makeScatter("Afghanistan")