How I build a reorder Array Object Methods fetching Swapi

Question

I am building a Film grid that return their Id, thumbnail, title, episode number and released date.

How can I map reorderByDate() & reorderByEpisode() methods for return reorders values?

CodeSandbox Demo & Api Documentation Swapi

Films.js Component:

import React, { Component } from 'react';
import axios from 'axios';
import ListFilms from './ListFilms'

class Films extends Component {
  constructor(props) {
    super(props);

    this.state = {
      films: [],
    }

    this.getFilms = this.getFilms.bind(this)
  }

  getFilms() {
    return axios.get('https://swapi.co/api/films')
      ...
      })
  }

  reorderByDate = () => {
    let films = this.state.films.map(item => ({ ...item }));
    films.sort((a, b) =>
      a.release_date > b.release_date
        ? 1
        : b.release_date > a.release_date
        ? -1
        : 0
    );
    this.setState({ films });
  };

  reorderByEpisode = () => {
    let films = this.state.films.map(item => ({ ...item }));
    films.sort((a, b) =>
      a.episode_id > b.episode_id ? 1 : b.episode_id > a.episode_id ? -1 : 0
    );
    this.setState({ films });
  };

  componentWillMount(){
    this.getFilms();
  }
  render() {
    const { films } = this.state;
    return(
      <div className="container">
        <div className="d-flex justify-content-center align-items-center mb-2">
          <p className="mb-0 mr-2">Filter by:</p>
          <button onClick={this.reorderByDate} type="button" className="btn btn-warning btn-sm">Released Date</button>
          <p className="mb-0 mx-2">or:</p>
          <button onClick={this.reorderByEpisode} type="button" className="btn btn-warning btn-sm">Episode Number</button>
        </div>
        <ListFilms films={films} />
      </div>
    )
  }
};

export default Films;

simply sort the state films array pass the returned value to films prop — Shubham Khatri, Feb 04 '19 at 05:23
Possible duplicate of [How to sort javascript objects based on their properties, specifying the property](https://stackoverflow.com/questions/7462766/how-to-sort-javascript-objects-based-on-their-properties-specifying-the-propert) and [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216) and [Sorting JavaScript Object by property value](https://stackoverflow.com/questions/1069666) — adiga, Feb 04 '19 at 05:32
are you looking for a solution like this https://codesandbox.io/s/r5o56mz2zn ? you need to sort films array for both the problems — Jayavel, Feb 04 '19 at 06:15
Thks! I rebuild reorder methods like arrow functions for fix an issue of films scope. — mdiiorio, Feb 04 '19 at 14:32

score 0 · Answer 1 · edited Feb 04 '19 at 06:24

0

To solve the current scenario, you can use onClick() listeners on the buttons, and either use arrow operator or bind function to this

Inside the function, use Array.prototype.sort method to implement custom logic for sorting based on date or episode number

Refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

You should use this.setState(prevState => nextState) functional syntax since you are trying to update films array from the exisiting state object to a sorted array and re-render

edited Feb 04 '19 at 06:24

Cody Gray - on strike

239,200
50
490
574

answered Feb 04 '19 at 05:31

Dhananjai Pai

5,914
1
10
25

But i did what you say and add onClick events and arrows functions. Now i'm block traing to get films values inside of methods. – mdiiorio Feb 04 '19 at 05:51

score 0 · Answer 2 · answered Feb 04 '19 at 06:20

please use the updated code from https://codesandbox.io/s/zn923169mx

reorderByDate = () => {
    let films = this.state.films;
    // let films = this.state.films;
    //console.log("from real",films[0].release_date);
    films = films.sort((a, b) => {
      let date1 = new Date(a.release_date).getTime();
      let date2 = new Date(b.release_date).getTime();
      console.log(date1);
      return date1 - date2;
    });
    this.setState({ films });
  };

  reorderByEpisode = () => {
    // console.log(...films.episode_id);
    let films = this.state.films;
    films = films.sort(function(a, b) {
      return a.episode_id - b.episode_id;
    });
    this.setState({ films });
  };

score -1 · Answer 3 · answered Feb 04 '19 at 05:53

Here is an example of sorting the movies by release_date.This is basic idea you can use it to sort on other basis. Add renderByDate() to Films and the button in Films container to to call the method

//add this button in your `Films` component
<button onClick={this.renderByDate}>Render By Date</button>

renderByDate = () => {
    let films = this.state.films;
    //console.log("from real",films[0].release_date);
    films = films.sort((a, b) => {
      let date1 = new Date(a.release_date).getTime()
      let date2 = new Date(b.release_date).getTime()
      console.log(date1);
      return date1 - date2;
    });
    this.setState({ films });
  };

How I build a reorder Array Object Methods fetching Swapi

3 Answers3