Display nested array depending on nested value

Question

I'm trying to display a nested array in my screen (see array below), the first layer display correctly, but when I try to display the second one, it doesn't return anything, the items in the second layer array should be displayed only if selected=false, that's why I decided to use a forEach function first.

map

   const items = order.order.map((item) => {
    
          const additional = item.additional.forEach((e) => {
                e.data.map((a) => {
                    const id = Math.random() * Math.random() + a.id
                    if(a.selected == false){
                      return(
                        <View key={id}>
                          <Text>{a.title}</Text>
                          <Text>$ {a.price}</Text>
                        </View>
                      )
                    }
                  })
              })
    
          return (
            <View key={item.id}>
               <Text>{item.quantity}</Text>
               <Text>{item.title}</Text>
               <Text>$ {item.price.toFixed(2)}</Text>
              {additional}
            </View>
          )
        })

array ITEM

Object {
  "additional": Array [
    Object {
      "data": Array [
        Object {
          "id": 0,
          "price": 0,
          "selected": false,
          "title": "Hot Sauce",
          "type": "Sauces",
        },
        Object {
          "id": 1,
          "price": 0,
          "selected": false,
          "title": "Medium Sauce",
          "type": "Sauces",
        },
      ],
      "id": 1,
      "required": true,
      "title": "Sauces",
    },
    Object {
      "data": Array [
        Object {
          "id": 0,
          "price": 1,
          "selected": false,
          "title": "Ranch",
          "type": "Sides",
        },
        Object {
          "id": 1,
          "price": 1,
          "selected": false,
          "title": "Blue Cheese",
          "type": "Sides",
        },
      ],
      "id": 0,
      "required": false,
      "title": "Sides",
    },
  ],
  "id": 0.103,
  "price": 6.95,
  "quantity": 1,
  "title": "Buffalo Wings",
}

The problem is forEach, as in `const additional = item.additional.forEach(...whatever...)` - Array.forEach doesn't return anything, so `additional` will be undefined. Use Array.map. — James, Mar 01 '22 at 18:59
if use Array.map how can I display the items depending on the `selected` value — Salvo, Mar 01 '22 at 19:03
Try it like this: `array.filter(obj => obj.selected === false).map(obj => ....steps...)`. So, you first filter & keep only those array elements that you need - and then apply `.map()` to return the info you need from those filtered array elements. — jsN00b, Mar 01 '22 at 19:06
I'm kind of new to programming, do you mind providing the full example applied to my problem? Thanks — Salvo, Mar 01 '22 at 19:07
I tried this, but it still doesn't show anything: `{item.additional.map((e) => { e.data.filter(obj => obj.selected === false).map(a => { const id = Math.random() * Math.random() + a.id return( {a.title} $ {a.price} ) }) })} ` — Salvo, Mar 01 '22 at 19:27

score 2 · Accepted Answer · answered Mar 02 '22 at 05:14

import "./styles.css";

const data = {
  additional: [
    {
      data: [
        {
          id: 0,
          price: 0,
          selected: false,
          title: "Hot Sauce",
          type: "Sauces"
        },
        {
          id: 1,
          price: 0,
          selected: true,
          title: "Medium Sauce",
          type: "Sauces"
        }
      ],
      id: 1,
      required: true,
      title: "Sauces"
    },
    {
      data: [
        {
          id: 0,
          price: 1,
          selected: true,
          title: "Ranch",
          type: "Sides"
        },
        {
          id: 1,
          price: 1,
          selected: false,
          title: "Blue Cheese",
          type: "Sides"
        }
      ],
      id: 0,
      required: false,
      title: "Sides"
    }
  ],
  id: 0.103,
  price: 6.95,
  quantity: 1,
  title: "Buffalo Wings"
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div className="content" key={data.id}>
        <div>Title: {data.title}</div>

        <div>Price: {data.price.toFixed(2)}</div>

        <div>Qty: {data.quantity}</div>

        <br />

        <div>Additional:</div>
        {data.additional.map((item, index) => {
          return (
            <div key={item.id}>
              {item.title}:
              <ul>
                {item.data
                  .filter((data) => !data.selected)
                  .map((data, dataIndex) => {
                    return (
                      <li key={data.id}>
                        <div>
                          {data.title} - {data.type}
                        </div>
                      </li>
                    );
                  })}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Ass mentioned above, forEach didn't return anything. So you can combine filter and map. Here is the working sandbox https://codesandbox.io/s/competent-leavitt-b2e2ec?file=/src/App.js

Display nested array depending on nested value

1 Answers1