Javascript / Json根据属性中的键值显示键值列表

debugcn 发表于 Dev

发现

我希望能够基于属性中存在的值提取键值列表。

到目前为止，我的代码。

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var myObjjj = JSON.parse(this.responseText);
        var e;
        var q;
        var w = "";

        for (q in myObjjj.features[0].properties.AREAID) {
            w += myObjjj.features[q].properties.CDNAME + "<br>";
        }

        document.getElementById("demog").innerHTML = w;
    }
};

xmlhttp.open("GET", "https://api.npoint.io/d901ff317ae962d8c376", true);
xmlhttp.send();

<!DOCTYPE html>
<html>
<head>
    <title>Read data from External JSON file using JavaScript</title>
</head>
<body>
    <h3>
        Data extracted from External JSON file using JavaScript.
    </h3>
    
    <p id="demog" style="border: 2px solid blue;"></p>      
</body>
</html>

来自网址的Json- https: //api.npoint.io/d901ff317ae962d8c376

{"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"CDUID":"4811","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 11","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4807","COLOR":"#00fffc","PRUID":"48","AREAID":"area1","CDNAME":"Division No. 7","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4815","COLOR":"#fffc00","PRUID":"48","AREAID":"area2","CDNAME":"Division No. 15","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4802","COLOR":"#ff0000","PRUID":"48","AREAID":"area3","CDNAME":"Division No. 2","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4808","COLOR":"#00fffc","PRUID":"48","AREAID":"area1","CDNAME":"Division No. 8","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4803","COLOR":"#fffc00","PRUID":"48","AREAID":"area2","CDNAME":"Division No. 3","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4801","COLOR":"#ff0000","PRUID":"48","AREAID":"area3","CDNAME":"Division No. 1","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4804","COLOR":"#ff0000","PRUID":"48","AREAID":"area3","CDNAME":"Division No. 4","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4801","COLOR":"#ff0000","PRUID":"48","AREAID":"area3","CDNAME":"Division No. 1","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4804","COLOR":"#ff0000","PRUID":"48","AREAID":"area3","CDNAME":"Division No. 4","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4806","COLOR":"#fffc00","PRUID":"48","AREAID":"area2","CDNAME":"Division No. 6","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4816","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 16","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4812","COLOR":"#0600ff","PRUID":"48","AREAID":"area5","CDNAME":"Division No. 12","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4805","COLOR":"#fffc00","PRUID":"48","AREAID":"area2","CDNAME":"Division No. 5","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4817","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 17","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4813","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 13","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4810","COLOR":"#0600ff","PRUID":"48","AREAID":"area5","CDNAME":"Division No. 10","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4819","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 19","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4818","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 18","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4814","COLOR":"#ff00f0","PRUID":"48","AREAID":"area4","CDNAME":"Division No. 14","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}},
{"type":"Feature","properties":{"CDUID":"4809","COLOR":"#00fffc","PRUID":"48","AREAID":"area1","CDNAME":"Division No. 9","CDTYPE":"CDR","PRNAME":"Alberta","KML_STYLE":"area6"}}]}

我假设它需要某些版本的

对于每个myObjjj.features[i].properties.AREAID拉myObjjj.features[q].properties.CDNAME

理想的结果：

区域4

第11分部

第16师

第17分部

第13分部

第19师

第18师

第14师

不知道该怎么做

twoK

这是想要的结果吗？AREAID = area4得到那个对象CDNAME？

您可以简单地通过AREAID以下方式过滤对象：

.filter(c => c.properties.AREAID === "area4")

然后只映射其 CDNAME

.map(res => res.properties.CDNAME+"<br>")

在一行中给出所需结果的整个代码：

var result = myObjjj.features.filter(c => c.properties.AREAID === "area4").map(res => res.properties.CDNAME+"<br>").join('');

join.(" ") 最后是将结果连接到数组中，这样在文档中打印时就不会出现数组昏迷的情况。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {



  if (this.readyState == 4 && this.status == 200) {
    var myObjjj = JSON.parse(this.responseText);

    var result = myObjjj.features.filter(c => c.properties.AREAID === "area4").map(res => res.properties.CDNAME + "<br>").join('');
    document.getElementById("demog").innerHTML = result;
  }
};
xmlhttp.open("GET", "https://api.npoint.io/d901ff317ae962d8c376", true);
xmlhttp.send();

<!DOCTYPE html>
<html>

<head>
  <title>Read data from External JSON file using JavaScript</title>
</head>

<body>
  <h3>
    Data extracted from External JSON file using JavaScript.
  </h3>

  <p id="demog" style="border: 2px solid blue;"></p>

</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。