ReactJS map through Object

Question

I have a response like this      I want to display the name of each object inside this HTML    subjects map  item  i    gt       lt li className  travelcompany-input  key  i  gt       lt span className  input-label  gt   item name   lt  span gt     lt  li gt           But it throws an error of subjects map is not a function   First  I have to define the keys of the objects where it creates an array of keys  where I want to loop through and show the subject names   What I also tried is this     Object keys subjects  map  item  i    gt       lt li className  travelcompany-input  key  i  gt       lt span className  input-label  gt key   i  Name   subjects i   lt  span gt     lt  li gt

User · Answer

Also you can use Lodash to direct convert object to array:

_.toArray({0:{a:4},1:{a:6},2:{a:5}})
[{a:4},{a:6},{a:5}]

In your case:

_.toArray(subjects).map((subject, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">Name: {subject[name]}</span>
    </li>
))}

User · Answer

Use Object entries   function   Object entries object  return          key  value        key  value               see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Object entries   Object entries subjects  map   key  subject   i    gt         lt li className  travelcompany-input  key  i  gt           lt span className  input-label  gt key   i  Name   subject name  lt  span gt       lt  li gt

User · Answer

Do you get an error when you try to map through the object keys  or does it throw something else   Also note when you want to map through the keys you make sure to refer to the object keys correctly  Just like this     Object keys subjects  map  item  i    gt        lt li className  travelcompany-input  key  i  gt        lt span className  input-label  gt key   i  Name   subjects item   lt  span gt       lt  li gt        You need to use  subjects item   instead of  subjects i   because it refers to the keys of the object  If you look for subjects i  you will get undefined

User · Answer

When calling Object keys it returns a array of the object s keys  Object keys   test      test2            test    test2   When you call Array map the function you pass will give you 2 arguments   the item in the array  the index of the item   When you want to get the data  you need to use item  or in the example below keyName  instead of i  Object keys subjects  map  keyName  i    gt         lt li className  quot travelcompany-input quot  key  i  gt           lt span className  quot input-label quot  gt key   i  Name   subjects keyName   lt  span gt       lt  li gt

User · Answer

I am not sure why Aleksey Potapov marked the answer for deletion but it did solve my problem  Using Object keys subjects  map gave me an array of strings containing the name of each object  while Object entries subjects  map gave me an array with all data inside witch it s what I wanted being able to do this   const dataInfected   Object entries dataDay  map  day  i    gt        console log day 1  confirmed         I hope it helps the owner of the post or someone else passing by

User · Answer

Map over the keys of the object using Object keys       Object keys yourObject  map function key      return  lt div gt Key   key   Value   yourObject key   lt  div gt

User · Answer

I use the below Object entries to easily output the key and the value   Object entries someObject  map   key  val   i    gt         lt p key  i  gt           key    val       lt  p gt

User · Answer

You get this error because your variable subjects is an Object not Array  you can use map   only for Array    In case of mapping object you can do this           Object keys subjects  map  item  i    gt             lt li className  travelcompany-input  key  i  gt               lt span className  input-label  gt   subjects item  name   lt  span gt           lt  li gt

[javascript] ReactJS map through Object

Examples related to javascript

Examples related to reactjs

Examples related to jsx