I have a json file like this:
[
{
"countryName": "Austria",
"countryID": "AT",
"countryPopulation": 8451860,
"regions":[
{
"regionName": "Burgenland (AT)",
"regionID": "AT11",
"regionPopulation": 286691
},
{
"regionName": "Niederösterreich",
"regionID": "AT12",
"regionPopulation": 1618592
},
{
"regionName": "Wien",
"regionID": "AT13",
"regionPopulation": 1741246
},
{
"regionName": "Kärnten",
"regionID": "AT21",
"regionPopulation": 555473
},
{
"regionName": "Steiermark",
"regionID": "AT22",
"regionPopulation": 1210971
},
{
"regionName": "Oberösterreich",
"regionID": "AT31",
"regionPopulation": 1418498
},
{
"regionName": "Salzburg",
"regionID": "AT32",
"regionPopulation": 531898
},
{
"regionName": "Tirol",
"regionID": "AT33",
"regionPopulation": 715888
},
{
"regionName": "Vorarlberg",
"regionID": "AT34",
"regionPopulation": 372603
}
]
},
{
"countryName": "Belgium",
"countryID": "BE",
"countryPopulation": 11161642,
"regions":[
{
"regionName": "Région de Bruxelles-Capitale",
"regionID": "BE10",
"regionPopulation": 1174624
},
{
"regionName": "Prov. Antwerpen",
"regionID": "BE21",
"regionPopulation": 1802309
},
{
"regionName": "Prov. Limburg (BE)",
"regionID": "BE22",
"regionPopulation": 855963
},
{
"regionName": "Prov. Oost-Vlaanderen",
"regionID": "BE23",
"regionPopulation": 1465150
},
{
"regionName": "Prov. Vlaams-Brabant",
"regionID": "BE24",
"regionPopulation": 1103737
},
{
"regionName": "Prov. West-Vlaanderen",
"regionID": "BE25",
"regionPopulation": 1177567
},
{
"regionName": "Prov. Brabant Wallon",
"regionID": "BE31",
"regionPopulation": 389479
},
{
"regionName": "Prov. Hainaut",
"regionID": "BE32",
"regionPopulation": 1332489
},
{
"regionName": "Prov. Liège",
"regionID": "BE33",
"regionPopulation": 1095977
},
{
"regionName": "Prov. Luxembourg (BE)",
"regionID": "BE34",
"regionPopulation": 278278
},
{
"regionName": "Prov. Namur",
"regionID": "BE35",
"regionPopulation": 486069
}
]
},
{
"countryName": "Bulgaria",
"countryID": "BG",
"countryPopulation": 7284552,
"regions":[
{
"regionName": "Severozapaden",
"regionID": "BG31",
"regionPopulation": 823469
},
{
"regionName": "Severen tsentralen",
"regionID": "BG32",
"regionPopulation": 844511
},
{
"regionName": "Severoiztochen",
"regionID": "BG33",
"regionPopulation": 957460
},
{
"regionName": "Yugoiztochen",
"regionID": "BG34",
"regionPopulation": 1067981
},
{
"regionName": "Yugozapaden",
"regionID": "BG41",
"regionPopulation": 2128783
},
{
"regionName": "Yuzhen tsentralen",
"regionID": "BG42",
"regionPopulation": 1462348
}
]
},
...
Then I have two variables: cs
and rs
. At any moment only one of them is different from null.
cs
contains the country selected by the user, rs
contains the region selected by the user. As said before, if cs
is different from null, then rs
is null and vice versa. This is because the user can select a country from a map or select a region of a country.
My goal is to create a checkbox (or something similar, I still have to think about it) that allows you to select, beyond the current region (country), also other regions (countries) so you can compare data.
What I would like is:
if cs != null
-> I want to get a list of countries (all countries in the Json file)
if rs != null
-> I want to get the list of regions of the country to which the rs belongs.
To understand each other better:
This is what I tried to do.
// global variables
cs = null; // if it is not null, the user has selected this country
csi = null; // country id
rs = null; // if it is not null, the user has selected this region
rsi = null; // region id
currentCountries = null; // list of all countries
currentRegions = null; // list of regions in the selected country
/**
* Function that creates line charts only when a country or a region is clicked.
*/
function createLineChart(antigenSelected, yearSelected, countrySelected, countrySelectedId, regionSelected, regionSelectedId) {
defineLines(antigenSelected, yearSelected, countrySelected, countrySelectedId, regionSelected, regionSelectedId);
}
function defineLines(antigenSelected, yearSelected, countrySelected, countrySelectedId, regionSelected, regionSelectedId) {
/**
* To know if the user has clicked on the country or region, check that the selected region belongs to the selected country:
* - if it belongs to us -> the user has clicked on the selected region
* - if it does not belong to us -> the user has clicked on the selected country.
* At any moment only one of the two possibilities is assigned (the other is null).
*/
cs = null; // if it is not null, the user has selected this country
csi = null; // country id
rs = null; // if it is not null, the user has selected this region
rsi = null; // region id
// if the user has selected a region
if(regionSelectedId != null && countrySelectedId == regionSelectedId.substring(0, 2)) {
rs = regionSelected;
rsi = regionSelectedId;
}
// if the user has selected a country
else {
cs = countrySelected;
csi = countrySelectedId;
}
console.log("countrySelected: " + cs);
console.log("regionSelected: " + rs);
/**
* Load json with countries and regions.
*/
d3.json("../Project2/data/json/countriesAndRegions.json", function(error, countriesAndRegions) {
if(error) {
console.log("*** ERROR LOADING FILES: " + error + " ***");
throw error;
}
countriesAndRegions.forEach(function(c) {
allCountries.push(c.countryName);
currentRegions = c.regions;
});
currentRegions.forEach(function(r) {
//console.log(r.regionName);
});
console.log(allCountries);
console.log(currentRegions);
//var nested = d3.nest()
// I have to nest data?
//.object(currentRegions);
});
}
Obviously this code doesn't work. Or rather, it works for allCountries
but not for currentRegions
. How can I solve? Should I use the nest()
method?
What I want is:
cs != null
-> get all countries rs != null
-> get all regions of the country to which the rs
region belongs. Thanks a lot
To simplify, imagine that I have this json file.
var users = [
{
name: 'Corbin',
age: 20,
favoriteFoods: ['ice cream', 'pizza'],
other: [
{
a: 12,
b: "apple"
},
{
a: 15,
b: "pear"
}
]
},
{
name: 'John',
age: 25,
favoriteFoods: ['ice cream', 'skittle'],
other: [
{
a: 0,
b: "cinnamon"
},
{
a: 854,
b: "ginger"
},
{
a: 24,
b: "salt"
}
]
}
];
Then I have a variable that contains the string ginger
. How can I get the list [cinnamon, ginger, salt]
?
And if I have a variable containing the string Corbin
, how do I get the list [Corbin, John]
?
for example I have a json array sample same as your json array:
var users = [{name: 'Corbin', age: 20, favoriteFoods: ['ice cream', 'pizza']},
{name: 'John', age: 25, favoriteFoods: ['ice cream', 'skittle']}];
and i have to access the age property of the second user, then: users[1].age
will work.
if you have to access the second "favoriteFood" of the first user then you should use: users[0].favoriteFoods[2]
.
according to you request i am going to post an another sample code:
Okay this requirement requires the key
to be fetched based on the value and I've come up with an approach that uses a recursive call (there might be better approaches though).
Steps ( simplified ):
row
. row
keys by Object.keys(row)
row
. row[key]
is an object, just find the appropriate key/value pair that matches the value
passed (main value - either cs or rs ) and return the associated key
. I've used break
statements all over and finally a array.map() based on the associated key
. row[key]
is an Array , use the recursive call and perform the above steps. Hope this explains the code. Let me know if you have any questions. :)
var data = [ { "countryName": "Austria", "countryID": "AT", "countryPopulation": 8451860, "regions":[ { "regionName": "Burgenland (AT)", "regionID": "AT11", "regionPopulation": 286691 }, { "regionName": "Niederösterreich", "regionID": "AT12", "regionPopulation": 1618592 }, { "regionName": "Wien", "regionID": "AT13", "regionPopulation": 1741246 }, { "regionName": "Kärnten", "regionID": "AT21", "regionPopulation": 555473 }, { "regionName": "Steiermark", "regionID": "AT22", "regionPopulation": 1210971 }, { "regionName": "Oberösterreich", "regionID": "AT31", "regionPopulation": 1418498 }, { "regionName": "Salzburg", "regionID": "AT32", "regionPopulation": 531898 }, { "regionName": "Tirol", "regionID": "AT33", "regionPopulation": 715888 }, { "regionName": "Vorarlberg", "regionID": "AT34", "regionPopulation": 372603 } ] }, { "countryName": "Belgium", "countryID": "BE", "countryPopulation": 11161642, "regions":[ { "regionName": "Région de Bruxelles-Capitale", "regionID": "BE10", "regionPopulation": 1174624 }, { "regionName": "Prov. Antwerpen", "regionID": "BE21", "regionPopulation": 1802309 }, { "regionName": "Prov. Limburg (BE)", "regionID": "BE22", "regionPopulation": 855963 }, { "regionName": "Prov. Oost-Vlaanderen", "regionID": "BE23", "regionPopulation": 1465150 }, { "regionName": "Prov. Vlaams-Brabant", "regionID": "BE24", "regionPopulation": 1103737 }, { "regionName": "Prov. West-Vlaanderen", "regionID": "BE25", "regionPopulation": 1177567 }, { "regionName": "Prov. Brabant Wallon", "regionID": "BE31", "regionPopulation": 389479 }, { "regionName": "Prov. Hainaut", "regionID": "BE32", "regionPopulation": 1332489 }, { "regionName": "Prov. Liège", "regionID": "BE33", "regionPopulation": 1095977 }, { "regionName": "Prov. Luxembourg (BE)", "regionID": "BE34", "regionPopulation": 278278 }, { "regionName": "Prov. Namur", "regionID": "BE35", "regionPopulation": 486069 } ] }, { "countryName": "Bulgaria", "countryID": "BG", "countryPopulation": 7284552, "regions":[ { "regionName": "Severozapaden", "regionID": "BG31", "regionPopulation": 823469 }, { "regionName": "Severen tsentralen", "regionID": "BG32", "regionPopulation": 844511 }, { "regionName": "Severoiztochen", "regionID": "BG33", "regionPopulation": 957460 }, { "regionName": "Yugoiztochen", "regionID": "BG34", "regionPopulation": 1067981 }, { "regionName": "Yugozapaden", "regionID": "BG41", "regionPopulation": 2128783 }, { "regionName": "Yuzhen tsentralen", "regionID": "BG42", "regionPopulation": 1462348 } ] } ]; var cs = 'Belgium', rs = 'Yuzhen tsentralen'; // cs is not null, get all countries but first find the key var mainKey = null; function getKey(array, value) { for(var i=0; i<array.length; i++) { var flag = false, row = array[i], keys = Object.keys(row); for(var j=0; j<keys.length; j++) { var key = keys[j]; if(Array.isArray(row[key])) { getKey(row[key], value); } else if(row[key] === value) { mainKey = key; flag = true; console.log(array.map(function(d) { return d[mainKey];})); break; } } if(flag) { break; } } } if(cs != null) { getKey(data, cs); } if(rs != null) { getKey(data, rs); } /******************** This is what I thought earlier about the requirement, use it if you find it helpful *************/ /* // with underscore.js var row = _.findWhere(data, {countryName: cs}); if(row) { console.log(row["regions"]); console.log(row["regions"].map(function(r) { return r["regionName"]; })); } // without underscore.js var index = null; for(var i=0; i<data.length; i++) { if(data[i]['countryName'] === cs) { index = i; break; } } console.log(data[index]["regions"]); console.log(data[index]["regions"].map(function(r) { return r["regionName"]; })); */
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
The main problem is in this piece of code:
regionSelectedId != null && countrySelectedId == regionSelectedId.substring(0, 2)
Since countrySelectedId
will always be null
when regionSelectedId
is null
, that expression will always return false. You just have to modify it into something useful.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.