find a key value from a array of objects and render

Question

Data :

 const zones =  [
       {
          "ID":"4131",
          "RID":"f1438b",
          "Name":"Hero"
       },
       {
          "ID":"6266",
          "RID":"cd074d",
          "Name":"Villan"
       }
    ]

My Code :

<Polygon positions={}>
        <Popup>
         {poly.ID}
        </Popup>
</Polygon>

Where, poly.ID is "4131".

I need to display Name instead of poly.ID. And Name is obtained from the above Data, where poly.ID is mapped to get the Name.

I tried,

<Polygon positions={}>
        <Popup>
         {zones.map((zone) => poly.ID === zone.Name)}
        </Popup>
</Polygon>

But it, doesn't seem to render Name nor nothing

Quentin Grisel · Accepted Answer · 2021-09-06 07:10:42Z

2

If you just want to find one element and display its name, here is how you can do :

zones.find(x => x.ID === poly.ID).Name

Note I am using find, not map.

answered Sep 6, 2021 at 7:10

Quentin Grisel

5,0171 gold badge13 silver badges19 bronze badges

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

Comments

Kamesh · Accepted Answer · 2021-09-06 07:07:13Z

1

You have wrong condition in your map function, you are checking ID against name which will always be false, try this:

<Polygon positions={}>
        <Popup>
         {zones.map((zone) => poly.ID === zone.ID)}
        </Popup>
</Polygon>

answered Sep 6, 2021 at 7:07

Kamesh

1,1629 silver badges12 bronze badges

Comments

Majid M. · Accepted Answer · 2021-09-06 07:14:25Z

1

You can use filter:

<Polygon positions={}>
        <Popup>
         {zones.filter((zone) => poly.ID === zone.ID)[0].Name}
        </Popup>
</Polygon>

answered Sep 6, 2021 at 7:14

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

Comments

Freedruk · Accepted Answer · 2021-09-06 07:47:54Z

1

zones.find(x => x.ID === poly.ID) might return undefined if no match is found. You can add a check like this:

const zone = zones.find(x => x.ID === poly.ID);

<Polygon positions={}>
        <Popup>
         {zone && zone.Name}
        </Popup>
</Polygon>

edited Sep 6, 2021 at 7:47

answered Sep 6, 2021 at 7:39

Freedruk

4472 silver badges4 bronze badges

Collectives™ on Stack Overflow

find a key value from a array of objects and render

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related