How can I Filtering API data(response) in ReactJS?

Question

I am working on Reactjs application, I am doing get request to render the list item with axios, data is in form of json

in response, there is array which has type purchase, refund and Adjustment, i have to make a functionality by which i can filter array with types(onClick), i have renderd list item but not able to filter according to the type given by API response, can anyone help me to sort out this issue,

this.renderTransactionSummary(txn, data) is a different function which is maping data from API to render list item

JSON RESPONSE

 "transactions": [
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "refund"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "adjustment"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "purchase"
            },
  ]

reactjs code

render() {
    return (<Layout t={t}>
        <div className="content">
            <div className="wrapper">
                <div className="filterWrapper">
                    <ul className="filters">
                        <li className="active"><span>{t('wallet.all')}</span></li>
                        <li><span>{t('wallet.purchase')}</span></li>
                        <li><span>{t('wallet.adjustment')}</span></li>
                        <li><span>{t('wallet.refund')}</span></li>
                    </ul>
                </div>
                <div className="summaryContainer">
                    {this.renderTxnHeader()}

                    <ul className="summaryList">
                        {/* List Items */}
                        {transaction.map((txn, key) => (
                            <li key={key} className="txnList">
                                <div className="summaryBlock">
                                    {this.renderTransactionSummary(txn, data)}
                                </div>
                            </li>
                        ))}
                    </ul>
                </div>

            </div>
            </Layout>);
}

Image will make you clear

So when you click a type you want to filter the data you have in memory clientside — curv
– curv, Commented Nov 22, 2017 at 20:04
yes @Zinc, this json data is coming from API and i want to filter the list item according to types(refund, adjustment and purchase) — wali
– wali, Commented Nov 22, 2017 at 20:06

Ajay Gaur · Accepted Answer · 2017-11-22 20:06:36Z

3

You can use lodash groupby to group the data for your application and then send data to your application. The code should be :

const a =  {transactions: [
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "refund"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "adjustment"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "purchase"
            },
  ]
};  

const filterByType = _.groupBy({...a.transactions}, 'type');

The filterByType will contain desired data as :

{
  "refund": [
    {
      "amounts": 12.96,
      "balance": 0,
      "description": "",
      "occurred_at": "2017-09-23T19:18:21+00:00",
      "type": "refund"
    }
  ],
  "adjustment": [
    {
      "amounts": 12.96,
      "balance": 0,
      "description": "",
      "occurred_at": "2017-09-23T19:18:21+00:00",
      "type": "adjustment"
    }
  ],
  "purchase": [
    {
      "amounts": 12.96,
      "balance": 0,
      "description": "",
      "occurred_at": "2017-09-23T19:18:21+00:00",
      "type": "purchase"
    }
  ]
}

answered Nov 22, 2017 at 20:06

Ajay Gaur

5,2807 gold badges41 silver badges64 bronze badges

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

7 Comments

wali Over a year ago

So i have to first store my API data in constant, right @ajay ?

Ajay Gaur Over a year ago

Yeah, you'll have to store this somewhere

wali Over a year ago

hey @Ajay, how to filter onClick, for example i have clicked purchase type and after clicking i have to show only purchase type ?

Ajay Gaur Over a year ago

You must be storing your initial data somewhere, so you can also make run time calculations to get this data.

Ajay Gaur Over a year ago

You can write the groupBy code in your onClick method

|

Miodrag Trajanovic · Accepted Answer · 2018-02-17 17:01:12Z

I make from this first use filter, how I can chose what is need of data and then use map method how can rendered list data. Because in many case better is use Id field and then read this row of data.

  const pera=[
    {"id": 1,"title": "Prvi"},
    {"id": 2, "title": "Drugi"},
    {"id": 3, "title": "Treci"},
    {"id": 4, "title": "Cetvrti"},
    {"id": 5, "title": "Peti"},
    {"id": 6, "title": "Sesti"},
    {"id": 7, "title": "Sedmi"},
    {"id": 8, "title": "Osmi"},
    {"id": 9, "title": "Deveti"},
    {"id": 10, "title": "Desti"}
    ];


class Proba extends Component{
    constructor(){
        super();
        this.state={
            mika:[],
        };
    }

    render(){

        const  mika = pera.filter(id=>{
            return (id.id=== 2);
        });
        const mika1 = mika.map((primer,i)=>{
            return(
              <div key={primer.id}>
                  {primer.id} {primer.title}
              </div>
            );
        });

On this away we ever get what is need with this sample key.But this idea you can use and for complex problem, because we must get soluction at start point how problem don't stay biggar

Collectives™ on Stack Overflow

How can I Filtering API data(response) in ReactJS?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related