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
– Shubham Khatri, Commented Feb 4, 2019 at 5:23
Possible duplicate of How to sort javascript objects based on their properties, specifying the property and Sort array of objects by string property value and Sorting JavaScript Object by property value — adiga
– adiga, Commented Feb 4, 2019 at 5:32
are you looking for a solution like this codesandbox.io/s/r5o56mz2zn ? you need to sort films array for both the problems — Jayavel
– Jayavel, Commented Feb 4, 2019 at 6:15
Thks! I rebuild reorder methods like arrow functions for fix an issue of films scope. — mdiiorio
– mdiiorio, Commented Feb 4, 2019 at 14:32

Shalini Sentiya · Accepted Answer · 2019-02-04 06:20:23Z

0

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 });
  };

answered Feb 4, 2019 at 6:20

Shalini Sentiya

973 bronze badges

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

Comments

Cody Gray · Accepted Answer · 2019-02-04 06:24:33Z

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 4, 2019 at 6:24

Cody Gray♦

246k53 gold badges512 silver badges591 bronze badges

answered Feb 4, 2019 at 5:31

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

1 Comment

mdiiorio Over a year ago

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.

Maheer Ali · Accepted Answer · 2019-02-04 05:53:07Z

-1

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 });
  };

answered Feb 4, 2019 at 5:53

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Collectives™ on Stack Overflow

How I build a reorder Array Object Methods fetching Swapi

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related