Javascript/JSON count duplicate values and Parsein HTML

Question

The following code maps the JSON file and displays a comma list of unique AREAID values and displays it in:

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

I want the following code to count how many times each unique value repeats without destroying the mapping.

The result should look like what is in:

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

I am assuming it needs a some sort of forEach loop, not sure how to do that.

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



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


    
     const mArrayE = myObjjj.features.filter(c => c.properties.PRUID === "48").map(res => ' of ' + res.properties.AREAID);
     const marketE = Array.from(new Set(mArrayE)).sort();
        

        document.getElementById("demog").innerHTML =  marketE;     

  }
};
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>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>

Json from URL - 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"}}]}

Does this answer your question? javascript count number values repeated in a jsonArray items — Sheepy
– Sheepy, Commented Mar 18, 2021 at 4:30
Thank you! However, the answers are showing results as console log and in JSON format. I want the answer in HTML — Discover
– Discover, Commented Mar 18, 2021 at 4:44
That's another question. After you get the count in form of a js object (which is not json), you only need some light data processing to build an html string (or dom, or react components, etc.) from the object, of which other Q&A can help if you are stuck. — Sheepy
– Sheepy, Commented Mar 28, 2021 at 18:18

MohammadReza Abbasi · Accepted Answer · 2021-03-18 04:50:46Z

For me, this api gives an error, so enter it manually

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>

Collectives™ on Stack Overflow

Javascript/JSON count duplicate values and Parsein HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related