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

Code for a regular expression that permits either letters or numbers with symbols

Replace the JS function in the bundle with a new custom function

Converting a string to regular text in JavaScript (specifically in ReactJS)

Exploring the Fundamentals of XSS

What is the most efficient way to iterate through an array to push properties into an object nested within another array?

What is the best way to incorporate the final paragraph into the foundational code?

Dealing with errors when Ajax response is not defined

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

Encountering a problem with loading ajax data in jVectorMap

Having trouble loading my array from JSON into the UITableView

Submitting data from a JavaScript frontend to a PHP backend

Statistics Sweden SCB API call was made, but unfortunately, no data was retrieved

Failure to trigger the success action in ExtJS

Utilizing jQuery and AJAX for submitting multiple POST requests

How can I prevent the substitution of "&" with ""&" when using PHP's include function?

Using React hooks to transfer an item from one array to another and remove it

Entering a value into an HTML textbox using Awesomium in VB.NET

Using Javascript to make a call to a RESTful endpoint

"Unexpected behavior: NextAuth is failing to return defined custom scopes

Inject an HTML or jade webpage into a div within another HTML or jade webpage

Dissecting Distinct and Alphabetized Attributes in JSON/JavaScript

Answer №1

Similar questions

Code for a regular expression that permits either letters or numbers with symbols

Replace the JS function in the bundle with a new custom function

Converting a string to regular text in JavaScript (specifically in ReactJS)

Exploring the Fundamentals of XSS

What is the most efficient way to iterate through an array to push properties into an object nested within another array?

What is the best way to incorporate the final paragraph into the foundational code?

Dealing with errors when Ajax response is not defined

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

Encountering a problem with loading ajax data in jVectorMap

Having trouble loading my array from JSON into the UITableView

Submitting data from a JavaScript frontend to a PHP backend

Statistics Sweden SCB API call was made, but unfortunately, no data was retrieved

Failure to trigger the success action in ExtJS

Utilizing jQuery and AJAX for submitting multiple POST requests

How can I prevent the substitution of "&" with ""&amp;" when using PHP's include function?

Using React hooks to transfer an item from one array to another and remove it

Entering a value into an HTML textbox using Awesomium in VB.NET

Using Javascript to make a call to a RESTful endpoint

"Unexpected behavior: NextAuth is failing to return defined custom scopes

Inject an HTML or jade webpage into a div within another HTML or jade webpage

How can I prevent the substitution of "&" with ""&" when using PHP's include function?