Display array elements from array of objects using the index obtained from another mapped array

Question

As title suggest, I am trying to get object from an array using the index obtained from another separate array. I get error: Uncaught TypeError: venues[index].map is not a function.

venues = [
     {id: 4, title: "bro"}, {id: 5, title: "np bro"} 
   ]
   
   cityArray = [4, 5, 5, 4, 5, 5]

Above is the venues and cityArray.

I get the index correctly. dispatches works correctly.

const Home = () => {
    const { city } = useParams();
  
    const featured = useSelector((state) => state.featuredList.featured);
   
    const venues = useSelector((state) => state.venueList.venues);

    useEffect(() => {   
        dispatch(listVenues())
    }, [dispatch])


    useEffect(() => {
        dispatch(listFeatured())
    }, [dispatch])

  
    useEffect(() => {
        if (city === "perth") {
           setCityArray(featured?.featured_perth)
        }
    }, [featured, city]) 
    
    return (
        <GridWrapper>
            {cityArray?.map((i) => {
                 var index = venues?.findIndex(ar => parseInt(ar.id) === i);
                     return (
            
                        <div>
                          {venues[0].map(arr => 
                              (
                                <div>
                                   <h1>{arr.title}</h1>
                                </div>
                               )
                           )}
                        </div>    
                            )   
                        }
                            
                        
                        )}
        </GridWrapper>
    )
}

export default Home;

If you're going to do this a lot it makes sense to create a Map of venues which can simply be accessed by id. Even if you keep looking them up individually, you can simply use find instead of findIndex to return the object itself. — pilchard
– pilchard, Commented Aug 9, 2022 at 8:20

pilchard · Accepted Answer · 2022-08-09 08:35:50Z

Your error Uncaught TypeError: venues[index].map is not a function is because venues[index] refers to an object not an array and objects don't implement a map method.

If you want to continue looking up each object individually, you can simply use find() instead of findIndex() to return the object itself. (You should probably be accounting for elements that aren't found as well).

return (
  <GridWrapper>
    {cityArray?.map((i) => {
      var venue = venues?.find((ar) => parseInt(ar.id) === i);
      return (
        <div>
          <h1>{venue.title}</h1>
        </div>
      );
    })}
  </GridWrapper>
);

But if you're going to be doing this repeatedly you should create a Map or object indexed by id and access it directly.

const venues = [
  { id: 4, title: "bro" },
  { id: 5, title: "np bro" }
];
const cityArray = [4, 5, 5, 4, 5, 5];

const venueMap = new Map(venues.map(v => [v.id, v]));

return (
  <GridWrapper>
    {cityArray?.map((id) => {
      const venue = venueMap.get(id);
      return (
        <div>
          <h1>{venue.title}</h1>
        </div>
      );
    })}
  </GridWrapper>
);

lpizzinidev · Accepted Answer · 2022-08-09 07:27:07Z

1

Since venues is an array of objects, you should be able to access the title property with:

return (
    <GridWrapper>
      {cityArray?.map((i) => {
        var index = venues?.findIndex((ar) => parseInt(ar.id) === i);
        return (
          <div>
            <h1>{venues[index].title}</h1>
          </div>
        );
      })}
    </GridWrapper>
  );

answered Aug 9, 2022 at 7:27

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Display array elements from array of objects using the index obtained from another mapped array

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