简体   繁体   中英

Get informations from JSON

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:

  • if cs != null -> get all countries
  • if 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 ):

  1. Loop through an array. Let's call the elements of array as a row .
  2. Get row keys by Object.keys(row)
  3. Loop through all the keys within the row .
  4. If 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 .
  5. BUT if 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM