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

Answer 1

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

Answer 2

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"
    }
  ]
}