Dissecting Distinct and Alphabetized Attributes in JSON/JavaScript

Question

Dissecting Distinct and Alphabetized Attributes in JSON/JavaScript

Below is a code snippet that retrieves and organizes a list of values from JSON data in alphanumeric order based on a specific key-value pair:

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>").sort().join('');
    document.getElementById("list").innerHTML = result;
  }
};
xmlhttp.open("GET", "https://api.npoint.io/eed1932ca3c208946d86", true);
xmlhttp.send();

<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="list" style="border: 2px solid yellow;"></p>
    

</body>
</html>

The JSON data retrieved from the specified URL contains information about different divisions and areas. The objective is to eliminate duplicate values to display only distinct entries, as shown below:

Area No. 13

Center No. 14

Division No. 11

Division No. 13

Division No. 14

Division No. 16

Division No. 17

Division No. 18

Division No. 19

javascript json

Answer 1

Answer №1

Your code before optimization:

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

Prior to the .join() operation, duplicates must be handled. Additionally, using .map() to insert <br> is unnecessary as .join() performs this function.

The snippet below utilizes new Set() and Array.from() for duplicate management:

const cdNames = myObjjj.features.filter(
  c => c.properties.AREAID === "area4"
).map(
  res => res.properties.CDNAME
);
const results = Array.from(new Set(cdNames)).sort().join('<br>');

Filter by AREAID
Convert the filtered array to an array of only CDNAMEs.
Transform that array into a set. (Duplicates are eliminated as sets are unordered collections of distinct values. Re-adding an existing value in a set does not impact it.)
Revert the set back to an array.
Sort the array.
Merge the array, with <br> serving as the separator.

Functional demonstration:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const myObjjj = JSON.parse(this.responseText);

    const cdNames = myObjjj.features.filter(
      c => c.properties.AREAID === 'area4'
    ).map(
      res => res.properties.CDNAME
    );
    const results = Array.from(new Set(cdNames)).sort().join('<br>');

    document.getElementById("list").innerHTML = results;
  }
};
xmlhttp.open("GET", "https://api.npoint.io/eed1932ca3c208946d86", true);
xmlhttp.send();

<html>
<head>
    <title>Fetch data from External JSON file using JavaScript</title>
</head>
<body>
    <h3>
        Data extracted from External JSON file utilizing JavaScript.
    </h3>
        <p id="list" style="border: 2px solid yellow;"></p>
</body>
</html>

Answer 2

Your code before optimization:

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

Prior to the .join() operation, duplicates must be handled. Additionally, using .map() to insert <br> is unnecessary as .join() performs this function.

The snippet below utilizes new Set() and Array.from() for duplicate management:

const cdNames = myObjjj.features.filter(
  c => c.properties.AREAID === "area4"
).map(
  res => res.properties.CDNAME
);
const results = Array.from(new Set(cdNames)).sort().join('<br>');

Filter by AREAID
Convert the filtered array to an array of only CDNAMEs.
Transform that array into a set. (Duplicates are eliminated as sets are unordered collections of distinct values. Re-adding an existing value in a set does not impact it.)
Revert the set back to an array.
Sort the array.
Merge the array, with <br> serving as the separator.

Functional demonstration:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const myObjjj = JSON.parse(this.responseText);

    const cdNames = myObjjj.features.filter(
      c => c.properties.AREAID === 'area4'
    ).map(
      res => res.properties.CDNAME
    );
    const results = Array.from(new Set(cdNames)).sort().join('<br>');

    document.getElementById("list").innerHTML = results;
  }
};
xmlhttp.open("GET", "https://api.npoint.io/eed1932ca3c208946d86", true);
xmlhttp.send();

<html>
<head>
    <title>Fetch data from External JSON file using JavaScript</title>
</head>
<body>
    <h3>
        Data extracted from External JSON file utilizing JavaScript.
    </h3>
        <p id="list" style="border: 2px solid yellow;"></p>
</body>
</html>

Dissecting Distinct and Alphabetized Attributes in JSON/JavaScript

Answer №1

Similar questions

Does Google's web crawler have the ability to index content created by javascript?

What are some ways to retrieve data from a JSON response that is nested within an array, which in turn is nested within

How can we use the Selenium JavascriptExecutor in Java to return an Object from JavaScript?

Prevent selection duplication in adjacent select by disabling the option in AngularJS ng-options

Can we extract unique values from a JSONObject in Java?

Parsing intricate JSON into Java with classes nested at various levels of depth

Issue with custom fonts not showing in PDFs when using Puppeteer, even though they are displayed in screenshots

Organize tabs with ease in the bootstrap-tabdrop plugin

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

What are the steps to globalize the ng-bootstrap datepicker?

Utilizing phonegap/jQueryMobile to extract OpenCart products in JSON format is a simple process

Add a SlideUp effect to the .removeClass function by using a transition

Arranging a roster of models in C#

bind a class property dynamically in real-time

What is the best way to execute synchronous calls in React.js?

There are various iterations of html2canvas available

Implementing date values in Rest API parameter with Azure Data factory

Executing JavaScript code in the Selenium IDE

Unable to add an event while looping through a NodeList in JavaScript

Troubleshooting the issue with a styled subcomponent in React using Styled Components