How can I Include data in my map from another Array?

Question

I have the following code:

const OrderLines = (props) => {
  const { orderlines } = props
  const { items } = props

  console.log(items)

  if (orderlines === undefined) {
    return (
      <div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
    )
  }

  if (orderlines instanceof Array) {
    return (
      <div className="bg-white">
        <table className="min-w-full mx-12 divide-y divide-gray-200">
          <thead>
            <tr>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orderlines instanceof Array && orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
                if (line.quantity != line.checkedIn) {

                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                      <td className="px-6 py-4 whitespace-no-wrap"></td>
                    </tr>)
                }

              }))}
          </tbody>
        </table>
      </div>
    )
  }

As you can see I'm using .map() on orderlines to return the information that I want.

I have tried various incarnations and can't get my data to pair up.

What I am trying to achieve is to use the data from my 'items' array which matches the 'line' item

So line.itemID === item.itemID

Hope you understand where I'm going with this, how do I include the data from items in my orderlines map()?

---

So. I have this, which works if I add after the page has loaded but not before:

 {orderlines instanceof Array && orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
                if (line.quantity != line.checkedIn) {
                  const item = items.find(item => item.itemID === line.itemID)
                  console.log(items)
                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.itemID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.customSku}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.description}</td>
                    </tr>)
                }
              }))}

It seems that items doesn't hold the data I need when the code is run.

---

And, she works. Thanks for the help!

const OrderLines = (props) => {
  const { orderlines } = props
  const { items } = props

  if (orderlines === undefined) {
    return (
      <div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
    )
  }

  if (orderlines instanceof Array) {
    return (
      <div className="bg-white">
        <table className="min-w-full mx-12 divide-y divide-gray-200">
          <thead>
            <tr>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Item ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orderlines instanceof Array && orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
                if (line.quantity != line.checkedIn) {
                  const item = items.find(item => item.itemID === line.itemID)
                  console.log(items)
                  if (!item) {
                    return <div>Loading!!!</div>
                  }
                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.itemID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.customSku}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.description}</td>
                    </tr>)
                }
              }))}
          </tbody>
        </table>
      </div>
    )
  }

Answer 1

You can do something like this. Introduce a function that allows you to search through item list refer to search function below. Although this can be achieved inline as well.

// adding some default values for presentation, in your case you are fetching it from props or state
const orderlines = [
  {itemID: 0, someAttr: 'A'},
  {itemID: 1, someAttr: 'B'},
  {itemID: 2, someAttr: 'C'},
];
// adding some default values for presentation, in your case you are fetching it from props or state
const items = [
  {name: 'somename', itemID: 2},
  {name: 'somename 2', itemID: 3},
  {name: 'somename 3', itemID: 11}
]

function search(id) {
  const result = items.filter(item => item.itemID === id);
  return result && result.length ? result[0] : null;
}
orderlines.forEach(order => {
  console.log(order.itemID);
  const found = search(order.itemID);
  if(found) {
    console.log('print row', order, found)
  };
});

Update

For ease refer to https://repl.it/repls/SturdyLiquidUsers#index.js

Roughly your code has to be updated to something like below

const OrderLines = (props) => {
  const { orderlines } = props
  const { items } = props
  
  function search(id) {
    const result = items.filter(item => item.itemID === id);
    return result && result.length ? result[0] : null;
  }

  console.log(items)

  if (orderlines === undefined) {
    return (
      <div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
    )
  }

  if (orderlines instanceof Array) {
    return (
      <div className="bg-white">
        <table className="min-w-full mx-12 divide-y divide-gray-200">
          <thead>
            <tr>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orderlines instanceof Array && orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
                const found = search(order.itemID);
                if (line.quantity != line.checkedIn) {

                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                  <td className="px-6 py-4 whitespace-no-wrap">{
                      found && <span>{found}</span>
                  }</td>
                    </tr>)
                }

              }))}
          </tbody>
        </table>
      </div>
    )
  }