时间戳

首页 > 解决方案 > Javascript/JSON 根据属性内的最高键值拉取键值

javascript - Javascript/JSON 根据属性内的最高键值拉取键值

问题描述

下面的代码过滤 JSON 以根据以下键值对 "AREAID":"area4" 查找所有 "CDNAME" 值，并将其显示在带有蓝色边框的 div 中，以便如果将 area4 更改为 area3 它将显示各自的最大值。

我希望代码然后从带有蓝色边框的 div 中过滤列表，并在内部显示具有最高“CDUID”值的“CDNAME”值<p id="demog" style="border: 2px solid green;"></p>，在这种情况下它将是：

第 19 分部

我假设必须根据所有 CDUID 值检查蓝色边框数组。

怎么做？

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



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

    var result = Array.from(new Set(myObjjj.features.filter(c => c.properties.AREAID === "area4").map(res => "<li>" + res.properties.CDNAME + "</li>"))).sort().join('');
    document.getElementById("demob").innerHTML = "<ul>" + result + "</ul>";
    
    

  }
};
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="demob" style="border: 2px solid blue;"></p>
  <h3>Divison with Highest CDUID VALUE From Div With Blue Border.</h3>
  <p id="demog" style="border: 2px solid green;"></p>
</body>

</html>

来自 URL 的 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"}}]}

标签： javascripthtmljson

解决方案

您可以从数组中找到最大值，当您返回元素时，您可以检查项目是否具有最大值，然后返回带边框的元素。看看下面的例子。

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

  if (this.readyState == 4 && this.status == 200) {
    var myObjjj = JSON.parse(this.responseText);
    const filteredArray = myObjjj.features.filter(c => c.properties.AREAID === "area4")
    
    const maxValue = Math.max.apply(Math, filteredArray.map(function({properties}) { return properties["CDUID"]; }))
    

    var result = Array.from(new Set(filteredArray.map(res => {
    if (res.properties['CDUID'] == maxValue) {
      return `<li style="border: 1px solid green">` + res.properties.CDNAME + "</li>";
    }
    return "<li>" + res.properties.CDNAME + "</li>";
    }))).sort().join('');
    document.getElementById("demob").innerHTML = "<ul>" + result + "</ul>";
    
    

  }
};
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="demob" style="border: 2px solid blue;"></p>
  <h3>Divison with Highest CDUID VALUE From Div With Blue Border.</h3>
  <p id="demog" style="border: 2px solid green;"></p>
</body>

</html>

推荐阅读