javascript - 从 JSON 获取信息

标签 javascript json d3.js

我有一个这样的 json 文件:

[
    {
        "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 
            }
        ]
    },
    ...

然后我有两个变量:csrs。在任何时刻,只有其中一个不同于 null。

cs 包含用户选择的国家,rs 包含用户选择的地区。 如前所述,如果 cs 不同于 null,则 rs 为 null,反之亦然。 这是因为用户可以从 map 中选择一个国家或选择一个国家的地区。

我的目标是创建一个复选框(或类似的东西,我仍然需要考虑),允许您选择当前地区(国家)之外的其他地区(国家),以便您可以比较数据。

我想要的是:

  • if cs != null -> 我想获取国家列表(Json 文件中的所有国家)

  • if rs != null -> 我想获取 rs 所属国家/地区的区域列表。

为了更好地了解彼此: enter image description here

这就是我尝试做的。

// 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);

   });

}

显然这段代码不起作用。或者更确切地说,它适用于 allCountries 但不适用于 currentRegions。 我该如何解决?我应该使用 nest() 方法吗?

我想要的是:

  • if cs != null -> 获取所有国家
  • if rs != null -> 获取 rs 区域所属国家/地区的所有区域。

非常感谢


为了简化,假设我有这个 json 文件。

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"
            }
        ]
    }
];

然后我有一个包含字符串 ginger 的变量。如何获取列表 [cinnamon, ginger, salt]

如果我有一个包含字符串 Corbin 的变量,我该如何获取列表 [Corbin, John]

最佳答案

例如,我有一个与您的 json 数组相同的 json 数组示例:

var users = [{name: 'Corbin', age: 20, favoriteFoods: ['ice cream', 'pizza']},
             {name: 'John', age: 25, favoriteFoods: ['ice cream', 'skittle']}];

我必须访问第二个用户的年龄属性,然后: users[1].age 将起作用。

如果您必须访问第一个用户的第二个“favoriteFood”,那么您应该使用: 用户[0].favoriteFoods[2]

根据您的要求,我将发布另一个示例代码:

关于javascript - 从 JSON 获取信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48094513/

相关文章:

javascript - 轴不显示和对齐

javascript - D3.csv 循环访问器函数

javascript - D3.js .selectAll 不起作用

javascript - 在浏览器中将一页水平滚动的站点居中(而不是将 div 居中)

javascript - div 覆盖数组 cont 中的每个 div。 (排序功能错误)

javascript - IE10/11 Ajax XHR 错误 - SCRIPT7002 : XMLHttpRequest: Network Error 0x2ef3

javascript - 数据包含在一个数组/json中,想通过DOM注入(inject)到页面中,jQ有模板吗?

json - 使用JSon.NET对动态数据反序列化JSON

javascript - HTML5自定义属性更新值

javascript - 在 Twitter API 中使用 since_id 和 max_id