Join multiple array maps in ReactJs

Question

im new in reactjs, is that possible to do in reactjs,like mysql inner join, here my sample code.

          {dataCustomer.map((customer) => (
            <tr>
              <td>{customer.custid}</td>
              <td>{customer.custname}</td>
              <td>{customer.mailingaddr}</td>
              <td>{customer.stateid}</td>
              <td>{customer.districtid}</td>
              <td>{customer.postcode}</td>
            </tr>
          ))}

          {dataState.map((state) => (
            <tr>
              <td>{state.stateid}</td>
              <td>{state.statename}</td>
            </tr>
          ))}

how to join array map data from customer.stateid & state.stateid to call state.statename without use SQL syntax?..Is that possible?

Shree Charan · Accepted Answer · 2021-02-14 06:12:29Z

1

This should work

let joinedData=[]
dataCustomer.forEach((customer)=>{
let st= dataState.filter((state)=>state.stateid===customer.stateid);
if(st.length>0)
joinedData.push({...customer,statename:st[0].statename})
})

joinedData array will now contain the customer objects with the corresponding statename and you can use it as

{joinedData.map((customer) => (
        <tr>
          <td>{customer.custid}</td>
          <td>{customer.custname}</td>
          <td>{customer.mailingaddr}</td>
          <td>{customer.stateid}</td>
          <td>{customer.districtid}</td>
          <td>{customer.postcode}</td>
          <td>{customer.statename}</td>
        </tr>
      ))}

answered Feb 14, 2021 at 6:12

Shree Charan

5735 silver badges8 bronze badges

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

Comments

Silidrone · Accepted Answer · 2021-02-14 06:18:30Z

0

It is not exactly the same but I think the function below that I wrote can help you:

let customers = [{
    name: "Foo",
    stateid: 1
  },
  {
    name: "Boo",
    stateid: 3
  },
  {
    name: "Goo",
    stateid: 2
  },
  {
    name: "Zoo",
    stateid: 2
  },
];

let states = [{
    name: "State1",
    id: 1
  },
  {
    name: "State2",
    id: 2
  },
];

function join(customers, states, column1, column2) {
  return customers.map(customer => {
    states.forEach(state => {
      if (customer[column1] === state[column2]) {
        customer["state"] = { ...state };
      }
    })
    return customer;
  })
}

console.log(join(customers, states, "stateid", "id"))

Note that column1 and column2 parameters are the properties you are joining on.

edited Feb 14, 2021 at 6:18

answered Feb 14, 2021 at 6:11

Silidrone

1,6004 gold badges22 silver badges38 bronze badges

Collectives™ on Stack Overflow

Join multiple array maps in ReactJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related