Sorting and Filtering JSON Data by Value in JavaScript: A Comprehensive Guide

Question

Sorting and Filtering JSON Data by Value in JavaScript: A Comprehensive Guide

After successfully integrating the Star Wars API to show character names from the "people" object in this JSON array retrieved from , I now need to filter the results based on a specific value which corresponds to . The current code displays all species of people, but I want to display only those belonging to the human species. Here's the existing code snippet:

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
    return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
    const row = document.createElement('tr');
    const {
        name,
        height,
        mass,
        hair_color
    } = data;
    row.appendChild(constructElement('td', name))
    row.appendChild(constructElement('td', height))
    row.appendChild(constructElement('td', mass))
    row.appendChild(constructElement('td', hair_color))
    return row;
}

function constructElement(tagName, text, cssClasses) {
    const el = document.createElement(tagName);
    const content = document.createTextNode(text);
    el.appendChild(content);
    if (cssClasses) {
        el.classList.add(...cssClasses);
    }
    return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

fetchData('https://swapi.co/api/people/').then((data) => {
    data.results.forEach(result => {
        const row = constructTableRow(result);
        swTable.appendChild(row);
    });
});

<table id=sw-table><tbody></tbody></table>

The JSON data is fetched from

How can I modify the code to only display data for characters belonging to the human species?

javascript arrays json sorting

Answer 1

Answer №1

Have you considered implementing filter in this scenario?

const onlyHumans = data.filter(person => person.species.indexOf('https://swapi.co/api/species/1/') !== -1);

Answer 2

Have you considered implementing filter in this scenario?

const onlyHumans = data.filter(person => person.species.indexOf('https://swapi.co/api/species/1/') !== -1);

Answer 3

Answer №2

The data retrieved from the species API contains an array of people. Instead of filtering out specific individuals, iterate through the entire people array.

Please be cautious as this approach may encounter issues with SWAPI's rate limiting.

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
  return fetch(url).then((resp) => resp.json());
}

function createRow(data) {
  const row = document.createElement('tr');
  const { name, height, mass, hair_color } = data;
  row.appendChild(createElement('td', name))
  row.appendChild(createElement('td', height))
  row.appendChild(createElement('td', mass))
  row.appendChild(createElement('td', hair_color))
  return row;
}

function createElement(tagName, text, cssClasses) {
  const el = document.createElement(tagName);
  const content = document.createTextNode(text);
  el.appendChild(content);
  if (cssClasses) {
    el.classList.add(...cssClasses);
  }
  return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

fetchData(url).then(data =>
  data.people.forEach(personUrl =>
    fetchData(personUrl).then(result => {
      const row = createRow(result);
      swTable.appendChild(row);
    })
  )
);

<table id=sw-table>
  <tbody></tbody>
</table>

Answer 4

The data retrieved from the species API contains an array of people. Instead of filtering out specific individuals, iterate through the entire people array.

Please be cautious as this approach may encounter issues with SWAPI's rate limiting.

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
  return fetch(url).then((resp) => resp.json());
}

function createRow(data) {
  const row = document.createElement('tr');
  const { name, height, mass, hair_color } = data;
  row.appendChild(createElement('td', name))
  row.appendChild(createElement('td', height))
  row.appendChild(createElement('td', mass))
  row.appendChild(createElement('td', hair_color))
  return row;
}

function createElement(tagName, text, cssClasses) {
  const el = document.createElement(tagName);
  const content = document.createTextNode(text);
  el.appendChild(content);
  if (cssClasses) {
    el.classList.add(...cssClasses);
  }
  return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

fetchData(url).then(data =>
  data.people.forEach(personUrl =>
    fetchData(personUrl).then(result => {
      const row = createRow(result);
      swTable.appendChild(row);
    })
  )
);

<table id=sw-table>
  <tbody></tbody>
</table>

Answer 5

Answer №3

If you're aware that the URL https://swapi.co/api/species/1/ corresponds to a human species, you can easily verify its existence in the species array by utilizing the filter method.

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

The indexOf function can be employed to ascertain whether an element exists within an array. It returns -1 if the element is not found, hence employing bitwise NOT (~) transforms it into truthy if present or falsey if absent by converting -1 to 0.

You can then filter the results based on this function before iterating over them.

data.results.filter(isHuman).forEach(result => {....});

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
    return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
    const row = document.createElement('tr');
    const {
        name,
        height,
        mass,
        hair_color
    } = data;
    row.appendChild(constructElement('td', name))
    row.appendChild(constructElement('td', height))
    row.appendChild(constructElement('td', mass))
    row.appendChild(constructElement('td', hair_color))
    return row;
}

function constructElement(tagName, text, cssClasses) {
    const el = document.createElement(tagName);
    const content = document.createTextNode(text);
    el.appendChild(content);
    if (cssClasses) {
        el.classList.add(...cssClasses);
    }
    return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

fetchData('https://swapi.co/api/people/').then((data) => {
    data.results.filter(isHuman).forEach(result => {
        const row = constructTableRow(result);
        swTable.appendChild(row);
    });
});

<table id=sw-table><tbody></tbody></table>

Answer 6

If you're aware that the URL https://swapi.co/api/species/1/ corresponds to a human species, you can easily verify its existence in the species array by utilizing the filter method.

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

The indexOf function can be employed to ascertain whether an element exists within an array. It returns -1 if the element is not found, hence employing bitwise NOT (~) transforms it into truthy if present or falsey if absent by converting -1 to 0.

You can then filter the results based on this function before iterating over them.

data.results.filter(isHuman).forEach(result => {....});

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
    return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
    const row = document.createElement('tr');
    const {
        name,
        height,
        mass,
        hair_color
    } = data;
    row.appendChild(constructElement('td', name))
    row.appendChild(constructElement('td', height))
    row.appendChild(constructElement('td', mass))
    row.appendChild(constructElement('td', hair_color))
    return row;
}

function constructElement(tagName, text, cssClasses) {
    const el = document.createElement(tagName);
    const content = document.createTextNode(text);
    el.appendChild(content);
    if (cssClasses) {
        el.classList.add(...cssClasses);
    }
    return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

fetchData('https://swapi.co/api/people/').then((data) => {
    data.results.filter(isHuman).forEach(result => {
        const row = constructTableRow(result);
        swTable.appendChild(row);
    });
});

<table id=sw-table><tbody></tbody></table>

Answer 7

Answer №4

Here's an additional instance using .filter() and .includes() (instead of checking for a negative index):

fetchData('https://swapi.co/api/people/').then(data => {
    data.results
        .filter(person => person.species.includes("https://swapi.co/api/species/1/"))))
        .forEach(human => swTable.appendChild(constructTableRow(human)))
});

Answer 8

Here's an additional instance using .filter() and .includes() (instead of checking for a negative index):

fetchData('https://swapi.co/api/people/').then(data => {
    data.results
        .filter(person => person.species.includes("https://swapi.co/api/species/1/"))))
        .forEach(human => swTable.appendChild(constructTableRow(human)))
});

Answer 9

Answer №5

Is this code functioning properly?

    getData('https://swapi.co/api/people/').then((responseData) => {

       responseData.results.forEach(individualResult => {
       const tableRow = createRow(individualResult);
       if(individualResult.species === "https://swapi.co/api/species/1/") {
           speciesTable.appendChild(tableRow);
        }
   });

Answer 10

Is this code functioning properly?

    getData('https://swapi.co/api/people/').then((responseData) => {

       responseData.results.forEach(individualResult => {
       const tableRow = createRow(individualResult);
       if(individualResult.species === "https://swapi.co/api/species/1/") {
           speciesTable.appendChild(tableRow);
        }
   });

Sorting and Filtering JSON Data by Value in JavaScript: A Comprehensive Guide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Can you incorporate an eventListener within a for loop? If so, what would be the strategy to execute it successfully?

The repetition of the react nodejs page load occurs when the get method is utilized

Tips for implementing a distinct texture on child elements through traversal techniques

execute the NPM script in the current directory

In C#, transmitting byte[] through email and subsequently recovering it

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Input various information into a single form multiple times and automatically submit it to a Google spreadsheet

PHP JSON array containing key names with periods

Calculate the total sum of a specific property within an array using ES6

Simulating a JavaScript constructor using Sinon.JS

Is it possible to create a dynamic template in Angular using external sources?

Controlling the file system on a local level through browser-based JavaScript and Node.js

Navigating through nested objects in JSON when working with D3: a guide

Utilizing LoopBack Storage Service: Leveraging upload/download functions within JavaScript code

Using jQuery to iterate through an array and reverse its order

Obtain information from a file containing nested JSON objects in R

What is the best way to parse a JSON file and create a dynamic webpage using jQuery with the data from the

Initiate a jQuery modal dialogue box

"Encountering a new error with the creation of a user using AngularJS and Firebase

Guide to integrating and utilizing a personalized JavaScript file within TypeScript components in an Angular 2 application