如何从该数组中的值获取特定的 JSON 数组

Question

我是 d3.js 和 JSON 的新手。我正在通过做一些小的可视化来学习。现在，我正在尝试加载 JSON 数据并根据国家/地区代码可视化详细信息。

我的 JSON 数据是这样的：

[
  {
    "Id":"SWE",
    "Country":"Sweden",
    "Population":9592552
  },
  {
    "Id":"NOR",
    "Country":"Norway",
    "Population":5084190
  },
.
.
.
]

我有世界国家/地区地理信息 JSON，我可以成功地对其进行可视化，还可以突出显示所选国家/地区并获取所选国家/地区的 ID。现在我需要获取详细信息（根据我从选择中获得的 id，该国家/地区的人口和国家/地区名称）。有人能告诉我如何从 JSON 数组中获取值吗？

我试过

 population = data.map( function(d) { return d["Population"] });

但是这个给了我整个人口作为一个数组。如何根据 Id 获取 SWE 的人口？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">

        var data;

        function draw(geo_data) {
            "use strict";
            var margin = 75,
                    width = 1400 - margin,
                    height = 600 - margin;

            var svg = d3.select("body")
                    .append("svg")
                    .attr("width", width + margin)
                    .attr("height", height + margin)
                    .append('g')
                    .attr('class', 'map');

            var projection = d3.geo.mercator()
                    .scale(150)
                    .translate( [width / 2, height / 1.5]);

            var path = d3.geo.path().projection(projection);

            var map = svg.selectAll('path')
                    .data(geo_data.features)
                    .enter()
                    .append('path')
                    .attr('d', path)
                    .style('fill', 'lightBlue')
                    .style('stroke', 'black')
                    .attr("id", function(d) {
                        return d.id; })
                    .on("click", function(d, i) {

                        d3.select(".selected").classed("selected", false).style('fill', 'lightBlue');
                        d3.select(this).classed("selected", true).style('fill', 'red');
                        console.log(d.id)
                        display(d.id)

                    })
                    .style('stroke-width', 0.5);

        };

        d3.json("data/wrangledData_overallScore.json", function (error, json) {
            if (error) return console.warn(error);
            data = json;
            console.log("JSON", data);
        });

        function display(e){
           var population = data.map( function(d) { return d["Population"] });
            console.log(population)
        }

    </script>
</head>
<body>
<script type="text/javascript">
    /*
     Use D3 to load the GeoJSON file
     */

    d3.json("data/world-countries.json", draw);
</script>
</body>
</html>

我可以获得 id 的索引并使用它来查找 population 数组中的 population。但是我需要根据Id查找。有人可以告诉我我怎样才能得到这个。

Answer 1

只需遍历它们，直到看到正确的 ID。

for (var i in data) {
    if (data[i].Id == 'SWE') console.log(data[i]['Population']);
}

您还可以使用 while 循环或常规 for 循环。这里每条i"key"数据都测试了，所以每条数据都是data[i].

Answer 2

首先，由于您是 JSON 的新手，一些术语更正可以帮助您解决问题：JSON 是字符串而不是对象，因此它是 J[ 的缩写=39=]avaScript Object Notation。你所拥有的通俗地称为 POJO 或 Plain Old Javascript O对象。他们是不同的。

现在回答你的问题。您有两种方法：

您可以为即将推出的 ECMA 6 数组方法使用 poly-fill，并在未来验证您的答案

或者您可以使用 ECMA 5 功能推出自己的解决方案

第一个解决方案是使用 find 文档中提供的 poly-fill:

var countryData = data.find(function(element, index, array) { return element.Id === 'SWE'; }); countryData.Population // 9592552

第二种方法基本上是以您选择的任何方式重新创建多边形填充，如果您选择该选项，我将把它留给您作为练习来学习。

if (!Array.prototype.find) { Array.prototype.find = function(predicate) { if (this == null) { throw new TypeError('Array.prototype.find called on null or undefined'); } if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); } var list = Object(this); var length = list.length >>> 0; var thisArg = arguments[1]; var value; for (var i = 0; i < length; i++) { value = list[i]; if (predicate.call(thisArg, value, i, list)) { return value; } } return undefined; }; } var data = [{ "Id": "SWE", "Country": "Sweden", "Population": 9592552 }, { "Id": "NOR", "Country": "Norway", "Population": 5084190 }]; function display(e) { console.log("E", e); var countryData = data.find(function(element, index, array) { return element.Id === e; }); console.log(countryData.Population); } display('SWE');

如何从该数组中的值获取特定的 JSON 数组

How to get the specific JSON array from a value in that array

javascript

json

d3.js