Следующий код сопоставляет файл JSON и отображает список уникальных значений AREAID через запятую и отображает его в:

1
Discover 18 Мар 2021 в 07:22

1 ответ

Лучший ответ

Для меня этот api выдает ошибку, поэтому введите вручную

let myObjjj = {"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"}}]}

  let items = {}
  myObjjj .features
    .filter(c => c.properties.PRUID === "48")
    .forEach(element => {
      if (!items[element.properties.AREAID]) {
        items[element.properties.AREAID] = 0
      }
      items[element.properties.AREAID]++
    })
  let html_item = ''
  for (const key in items) {
    html_item += `${items[key]} of  ${key} <br> `
  }
  document.getElementById("demog").innerHTML = html_item;
<!DOCTYPE html>
<html>

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

<body>
  <h3>Unique Values and repetitions.</h3>
  <p id="demog" style="border: 2px solid green;"></p>

  <h3>Desired Result</h3>
  <p id="demob" style="border: 2px solid blue;">3 of area1, 4 of area2, 5 of area3, 7 of area4, 2 of area5</p>
</body>

</html>
1
MohammadReza Abbasi 18 Мар 2021 в 04:50