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

【问题标题】：How to get the specific JSON array from a value in that array如何从该数组中的值获取特定的 JSON 数组
【发布时间】：2015-04-11 04:27:00
【问题描述】：

我是 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 的索引并将其用于在人口数组中查找人口。但是我需要根据Id查找。有人可以告诉我我怎么能得到这个。

【问题讨论】：

我对类似问题的回答可能会有所帮助stackoverflow.com/a/32791194/1815624

标签： javascript json d3.js

【解决方案1】：

首先，由于您是 JSON 新手，因此需要对术语进行一些更正以帮助您：JSON 是字符串而不是对象，因此它是 JavaS 的缩写cript Object Notation。您所拥有的通常称为 POJO 或 Plain Old Javascript Object。它们是不同的。

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

您可以将 polyfill 用于即将推出的 ECMA 6 阵列方法，并在未来证明您的答案
或者您可以使用 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');

【讨论】：

感谢您提供信息，我尝试了您的解决方案，但出现 countryData 未定义错误：function display(e){ console.log("E",e) var countryData = data.find(function(element , 索引, 数组) { return element.id === e; }); console.log(countryData.Population) }
您正在匹配id。需要匹配Id。使用工作示例更新了答案。

【解决方案2】：

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

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

您也可以使用 while 循环或常规 for 循环。这里对data中的每一个i“key”进行了测试，所以每条数据都是data[i]。

【讨论】：

效率高吗？因为当我点击国家时，我需要循环数组。还有其他方法可以实现吗？
有了那个数据结构，没有。如果您有 一大堆 数组元素，这应该不是问题。
您可以根据需要对结果进行散列，例如var lookup = {}; for (var i in data) { lookup[data[i].Id] = data[i]; } console.log(lookup['SWE])
感谢您的建议。我会试试的