score:0
Accepted answer
const yourData = [{
"2671161009": {
"activityType": "RUNNING",
"averageHeartRateInBeatsPerMinute": 134,
"comments": "",
"durationInSeconds": 3884,
"startTimeInSeconds": 1525368621,
"startTimeOffsetInSeconds": -14400,
"summaryId": "2671161009",
},
"2671161249": {
"activityType": "OTHER",
"averageHeartRateInBeatsPerMinute": 111,
"comments": "",
"durationInSeconds": 103,
"startTimeInSeconds": 1525372533,
"startTimeOffsetInSeconds": -14400,
"summaryId": "2671161249",
},
}];
const activityData = yourData[0];// You have the entire object as the first element in an array. I don't know why;
const activityIds = Object.keys(activityData);
const activities = activityIds.map(activityID => ({
id: activityID,
...activityData[activityID]
}));
You can now map this activities
array as you wish.
score:0
hey how about a one liner code
Object.entries(b[0]).map((item , index)=>
<tr key={index}>
<td>Activity Type: {item[1].activityType}</td>
<td>DurationInSeconds: {item[1].durationInSeconds}</td>
</tr>
)
in Object.entries(b[0])
you will get your entries in an array then loop that array as your wish
score:3
You can use Object.entries to access all key-value pairs of the object:
<div>
{arr.map(obj =>
Object.entries(obj).map(([key, value]) => (
<tr key={key}>
<td>Key: {key}</td>
<td>Activity Type: {value.activityType}</td>
<td>DurationInSeconds: {value.durationInSeconds}</td>
</tr>
)))}
</div>
Source: stackoverflow.com
Related Query
- How to map the objects that having the dynamic keys in React?
- I AM HAVING ERROR WHEN TRYING TO MAP A DATA IN REACT . Objects are not valid as a React child (found: object with keys {children}), How do i solve it?
- How to pass dynamic props to a React component that accepts a union of objects as its type?
- How to display and handle dynamic checkoxes that are dependent on Task array value in the backend (Mongodb) in react js?
- How to Map the data that I am getting from ajax React js?
- How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)
- React keys when handling dynamic children. What are they for? How are they used behind the scenes?
- How to fix the Error: Objects are not valid as a React child (found: object with keys {})
- React - How can I reverse the order of dynamic children lists that have a key unique id
- How do i have an assets file that i can use in any file in my react app without always having to navigate to the assets folder
- How to map an Array of objects, that have arrays in the objects
- How do I make a map that when changing the state does not modify all the elements - React
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- How do react hooks determine the component that they are for?
- How to map an array of objects in React
- React router v4 - How do you access the state that is passed via Redirect?
- React hooks: How to write variables in functional components that in class components were initialized in the constructor
- How to TEST async calls made in componentDidMount that set the state of React Component
- React: How does React make sure that useEffect is called after the browser has had a chance to paint?
- how do I interpolate a Link component in Next-i18next / React i18next that changes position in the text
- How to validate with Yup that in array of objects at least one of object keys has true value?
- Avoid rerender in React caused by objects literal : how to do with variables in the object?
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- How does React Developer Tools determine that the webpage is using React?
- How to find the trigger that caused the update in React 16?
- How do I find the React DOM node that represents its actual html element?
- How to map an object's keys to make JSON easier to handle in React
- How can I drag and drop objects into a Mapbox map from outside the map?
More Query from same tag
- How to inject pod environment variables values into React app on runtime?
- Use Promise Results
- Reactjs - How to display imported images with Reactjs photo gallery
- Member variables in react class are "shared" by reference
- Getting GraphQL data into Gatsby
- Typescript not reading the correct type
- Why are these functions working different?
- Please include phone-type-formatter.{country}.js lib
- Zustand store not working inside custom hook
- How to access data in a child react component from a parent react component
- Iterate over json atributes to form table in React?
- How to change the material-ui-pickers time-picker timezone?
- Why React Components being stored as variables or as state is bad design practice
- Is there any way to auto crop the face after doing face detection with face-api.js?
- How to render async data in react + firestore?
- How to make a further API call with data from first API call?
- ReactJS Loading icon while waiting for data
- Check if a function is created by useCallback?
- React useState() & useContext() - TypeError: setState is not a function - What am I doing wrong?
- How can I conditionally use next/image component on React library?
- Run Redux action only when two other actions were triggered
- webpack-dev-server react-router push state
- What does ...rest mean in React JSX?
- Open menu on mouseover and Close menu on mouseleave in react
- reactjs jest jQuery is not defined
- npm ERR! Cannot read property 'version' of null
- How do I get the IDs from firestore into the object arrays?
- How to do form validation in react?
- Pass props to a mapped array of different components
- How to deal with large raw image re-renders causing lag in React app?