How to sort or filter JSON data by value in Javascript

Question

So I finally got star wars API to display the names of each character from the "people" object this JSON array taken from https://swapi.co/api/people/ in Vanilla Javascript. I need to, however, sort or filter the data results based on the specific value which is https://swapi.co/api/species/1/ the current code I have, when I run it displays the table with the names of all species of people, I only need the human species. Here is my code:

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 endpoint come from https://swapi.co/api/people/

How do I get the table to only display the data for only the human species?

Stephan Köninger · Accepted Answer · 2018-04-03 20:27:20Z

2

what about using filter?

const humansOnly = result.filter(p => p.species.indexOf('https://swapi.co/api/species/1/') !== -1);

answered Apr 3, 2018 at 20:27

Stephan Köninger

3141 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2018-04-03 20:36:43Z

1

The JSON returned by the species API includes a people array. So instead of filtering people, loop over the people array.

However, this could cause a problem due to the SWAPI rate limiting.

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(url).then(data =>
  data.people.forEach(personUrl =>
    fetchData(personUrl).then(result => {
      const row = constructTableRow(result);
      swTable.appendChild(row);
    })
  )
);

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

answered Apr 3, 2018 at 20:36

Barmar

789k57 gold badges554 silver badges669 bronze badges

3 Comments

MikeL5799 Over a year ago

Also when I add .sort() to the name, it breaks. Do I have to make a separate function to sort alphabetically?

Barmar Over a year ago

There's no array of names to sort. data.people is an array of URLs. So it's not clear what you're trying to sort.

MikeL5799 Over a year ago

Ahhh ok I see. Thanks

I wrestled a bear once. · Accepted Answer · 2018-04-03 20:38:47Z

Well, you know that https://swapi.co/api/species/1/ is human, so you can just check to see if that url exists in the species array using filter.

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

You can use indexOf to determine an element exists in an array. It returns negative one if it does not exist, so using bitwise NOT (~) makes it truthy if it exist and falsey if it doesn't by turning a -1 into a zero.

Then you can filter your results on that function before looping 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>

msanford · Accepted Answer · 2018-04-04 15:20:08Z

1

And another example using .filter() and .includes() (in place of detecting an 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)))
});

edited Apr 4, 2018 at 15:20

answered Apr 3, 2018 at 20:41

msanford

12.4k13 gold badges73 silver badges100 bronze badges

Comments

Brian Patterson · Accepted Answer · 2018-04-03 20:42:39Z

0

does this work?

    fetchData('https://swapi.co/api/people/').then((data) => {

       data.results.forEach(result => {
       const row = constructTableRow(result);
       if(result.species === "https://swapi.co/api/species/1/") {
           swTable.appendChild(row);
        }
   });

answered Apr 3, 2018 at 20:42

Brian Patterson

1,6252 gold badges16 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to sort or filter JSON data by value in Javascript

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related