how to FetchData from this nested JsonObject?

Question

I am a learner and tryiyng to make website using frontend react.js and backend node.js.I have created Api using node.js and want to display the data in card.But I cann't fetch the nested jsondata.Like I want to fetch "popular-> imageUrl" or "allmenu ->imageUrl" using react map.

this mapping --> "products.popular.map()" gets[error: Cannot read property 'map' of undefined}

how to solve it?

{
products: [
  {
    popular: [
      {
        _id: '1',
        name: 'Nasi Goreng',
        imageUrl: 'imagestest/3.jpg',
        rating: '5.0',
        deliveryTime: '45 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Extra special'
      },
      {
        _id: '2',
        name: 'Rendang',
        imageUrl: 'imagestest/7.jpg',
        rating: '4.9',
        deliveryTime: '35 mins',
        deliveryCharges: 'Free Delivery',
        price: '250',
        note: 'Special'
      },
      {
        _id: '3',
        name: 'Nasi Padang',
        imageUrl: 'imagestest/16.jpg',
        rating: '4.5',
        deliveryTime: '55 mins',
        deliveryCharges: 'Delivery charges 50 extra',
        price: '199',
        note: 'Chilly'
      },
      {
        _id: '7',
        name: 'Pece',
        imageUrl: 'imagestest/13.jpg',
        rating: '4.0',
        deliveryTime: '75 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Special, Spicy'
      },
      {
        _id: '4',
        name: 'Indomie',
        imageUrl: 'imagestest/13.jpg',
        rating: '3.8',
        deliveryTime: '25 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Special, Spicy'
      }
    ],
    recommended: [
      {
        _id: '2',
        name: 'Rendang',
        imageUrl: 'imagestest/7.jpg',
        rating: '4.9',
        deliveryTime: '35 mins',
        deliveryCharges: 'Free Delivery',
        price: '250',
        note: 'Special'
      },
      {
        _id: '1',
        name: 'Nasi Goreng',
        imageUrl: 'imagestest/3.jpg',
        rating: '5.0',
        deliveryTime: '45 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Extra special'
      },
      {
        _id: '7',
        name: 'Pece',
        imageUrl: 'imagestest/13.jpg',
        rating: '4.0',
        deliveryTime: '75 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Special, Spicy'
      }
    ],
    allmenu: [
      {
        _id: '1',
        name: 'Nasi Goreng',
        imageUrl: 'imagestest/3.jpg',
        rating: '5.0',
        deliveryTime: '45 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Extra special'
      },
      {
        _id: '2',
        name: 'Rendang',
        imageUrl: 'imagestest/4.jpg',
        rating: '4.9',
        deliveryTime: '35 mins',
        deliveryCharges: 'Free Delivery',
        price: '250',
        note: 'Special'
      },
      {
        _id: '3',
        name: 'Nasi Padang',
        imageUrl: 'imagestest/6.jpg',
        rating: '4.5',
        deliveryTime: '55 mins',
        deliveryCharges: 'Delivery charges 50 extra',
        price: '199',
        note: 'Chilly'
      },
      {
        _id: '4',
        name: 'Indomie',
        imageUrl: 'imagestest/12.jpg',
        rating: '3.8',
        deliveryTime: '25 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Special, Spicy'
      },
      {
        _id: '5',
        name: 'Rendang',
        imageUrl: 'imagestest/6.jpg',
        rating: '4.9',
        deliveryTime: '35 mins',
        deliveryCharges: 'Free Delivery',
        price: '250',
        note: 'Special'
      },
      {
        _id: '6',
        name: "Nasi Goreng",
        imageUrl: 'imagestest/7.jpg',
        rating: '5.0',
        deliveryTime: '45 mins',
        deliveryCharges: 'Free Delivery',
        price: '250',
        note: ''
      },
      {
        _id: '7',
        name: 'Pece',
        imageUrl: 'imagestest/1.jpg',
        rating: '4.0',
        deliveryTime: '75 mins',
        deliveryCharges: 'Free Delivery',
        price: '150',
        note: 'Special, Spicy'
      }
    ]
  }
]
}

`products` is an array, so it doesn't have a `popular` property. It only has one entry, so you could use `products[0].popular.map`, but I assume it's an array because it may have more than one entry (or none). — T.J. Crowder, Apr 12 '21 at 15:23
Side note: There is no JSON in your question; what you have is an array of objects, there's no JSON there. JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Apr 12 '21 at 15:24

how to FetchData from this nested JsonObject?

0 Answers0