create a new array from a filtered map in react js

Question

I am using react-json-to-csv and stateless functional components to make a search function that can create spreadsheets based on the results. I have a set of filters that applies which fields are visible in the mapped array being passed through props into the array items. So what I need is on the functional component object, using the stream of prospects and the boolean restrictions to physically create a new array of objects that effectively mirrors what is being displayed in the map with the restricted fields.

so if the map looks like this

        {prospects !== []
          ? prospects.map((prospect) => (
              <ProspectItem
                key={prospect._id}
                prospect={prospect}
                prosp={prosp}
              />
            ))
          : ""}

where prosp is boolean object structured like this

{
showField:false,
filterField:false, 
}

so basically I need some sort of forEach or filter or map which is the array currently being represented in the map.

the code I started with looks something like this

  const keys = Object.keys(prosp).filter((k) => prosp[k]);

  const r = prospects.filter(
    (prospect) => !keys.find((key) => (key = "showCreateDate")) && prospect.createDate
  );

this returns the entire prospect object in an array, so i feel like this something in the right direction as long as keys which is an array of string values where showField is true.

address2: ""
amount: "$25,000.00"
availableCredit: ""
caseWorkers: {originators: Array(0), loanProcessors: Array(0), documentProcessors: Array(0), upsells: Array(0), federalReso: Array(0), …}
city2: ""
compliant: "filed"
cpa: "cpa"
createDate: "2020-07-17T07:00:00.000Z"
email2: ""
email3: ""
employerName: ""
employerPhone: ""
employerTime: ""
family: []
files: []
filingStatus: "married"
fullName: "Steven Berardinelli"
home: ""
homePay: ""
income1Type: ""
income1Value: ""
income2Type: ""
income2Value: ""
income3Type: ""
income3Value: ""
lexId: ""
lienid: "5f065bf316d5951988e5e7c0"
name2: ""
notes: []
otherIncomeType: ""
otherIncomeValue: ""
paymentMethods: []
paymentSchedule: (2) [{…}, {…}]
paymentStatus: {balance: 5000, gross: 10000, initial: 5000, initialPaymentDate: "2020-07-17T07:00:00.000Z", lastPayment: 5000, …}
pdfs: []
phone: ""
phone2: ""
phone3: ""
pinCode: "202773"
prac: ""
problem1: ""
problem2: ""
problem3: ""
relation: ""
resSold: ""
resSold2: ""
resoStatus: {representation: Array(2), federalFile: Array(2), stateFile: Array(0), hardship: Array(0), paymentPlan: Array(0), …}
ssn: ""
ssn2: ""
state2: ""
status: "[object Object]"
totalCredit: ""
wages: ""
zip2: ""
__v: 0
_id: "5f11c137ddf8531a90996a61"
__proto__: Object

Martin Gainza · Accepted Answer · 2020-07-22 20:31:36Z

1

I modified my code based in your comments.

So, if you want an array of arrays:

    const result = [];
    
    const prospects= [{
        amount: "$25,000.00",
        name: "Prospect1"
      },{
        amount: "$15,000.00",
        name: "Prospect2"
      },{
        amount: "$35,000.00",
        name: "Prospect3"
      }]

    function arraysFilters(key) {
        switch (key) {
            case 'showName':
              prospects.map((prospect,i) => result[i] ? result[i].push(prospect.name) : result[i] = [prospect.name]);
              break;
            case 'showAmount':
              prospects.map((prospect,i) => result[i] ? result[i].push(prospect.amount) : result[i] = [prospect.amount]);
              break;
        }
    }
    
    const filterOptions = {
        showName: true,
        showAmount: true
    }
    
    Object.keys(filterOptions).map((key)=>{
        console.log(key);
        filterOptions[key] ? arraysFilters(key) : console.log(false);
    })

    console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I created a snippet to test if this is the correct approach.

And if you want an array of json:

const result = [];
    
    const prospects= [{
        amount: "$25,000.00",
        name: "Prospect1"
      },{
        amount: "$15,000.00",
        name: "Prospect2"
      },{
        amount: "$35,000.00",
        name: "Prospect3"
      }]

    function arraysFilters(key) {
        switch (key) {
            case 'showName':
              prospects.map((prospect,i) => result[i] ? result[i].name = prospect.name : result[i] = {name:prospect.name});
              break;
            case 'showAmount':
              prospects.map((prospect,i) => result[i] ? result[i].amount = prospect.amount : result[i] = {amount:prospect.amount});
              break;
        }
        
    }
    
    const filterOptions = {
        showName: true,
        showAmount: true
    }
    
    Object.keys(filterOptions).map((key)=>{
        console.log(key);
        filterOptions[key] ? arraysFilters(key) : console.log(false);
    })
    
    console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

edited Jul 22, 2020 at 20:31

answered Jul 22, 2020 at 17:05

Martin Gainza

1,42714 silver badges24 bronze badges

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

3 Comments

Mickey Gray Over a year ago

so showField isnt a part of prospect. its a set of true falses that are paired with fields in prospect. so prosp.showName === prospect.name being visible

Martin Gainza Over a year ago

Oh ok, I got it now, could you upload a json example of prospect object?

Mickey Gray Over a year ago

This is good for one value, lets say I want if amount is true and name is true to show an object that looks like {prospect1, 5000}

Collectives™ on Stack Overflow

create a new array from a filtered map in react js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related