score:0
put the check on type of value, if type is object
then skip that part from rendering. by this way it will skip objects and arrays
.
typeof([]) ==> 'object'
typeof({}) ==> 'object'
like this:
var data = {
group: 'name',
address: 'address',
manager: 'john',
products: [
{
electronic: 'laptop',
team: 'awesome'
}
]
}
object.entries(data).map(([key, val], index) => {
if(typeof(val) != 'object') {
console.log(key, val, index); //return the span
}
else null;
})
replace console.log(key, val, index)
by <span key={key}> {key}: {value} </span>
.
score:0
you can use filter before map:
var data = {
'group': 'name',
'address': 'address',
'manager': 'john',
'products': [
{
'electronic' 'laptop',
'team': 'awesome
}
]
}
return object.entries(data).filter(([key, value]) => {
if (typeof value !== 'object' ) return 1;
}).map(([key, value]) => {
<span key={key}> {key}: {value} </span>
});
here any key that is having value as object would be eliminated.
will return:
group: name
address: address
manager: john
score:1
try:
<div>
return object.entries(obj).map([key, value], i, arr){
if (i !== arr.length - 1) {
<span key={key}> {key}: {value} </span>
}
}
</div>
score:2
get the number of keys in the object using arr.length
as third parameter to the map function and compare with the index
in the map function like below snippet. also you are returning the data incorrectly from map
var data = {
group: 'name',
address: 'address',
manager: 'john',
products: [
{
electronic: 'laptop',
team: 'awesome'
}
]
}
var len = object.keys(data).length;
object.entries(data).map(([key, val], index, arr) => {
if(index !== arr.length - 1) {
console.log(key, val, index);
}
})
you code being
<div>
{object.entries(obj).map([key, value], index, arr){
if(index < arr.length) {
return <span key={key}> {key}: {value} </span>
}
}
</div>
Source: stackoverflow.com
Related Query
- Map over object except for last key - Reactjs
- I am trying to map over an array and add comma's in between each instance except for the last
- Iterate over array of object using map till the second last object
- Images are not displaying with <li> tag in map function for array object in Reactjs
- How to map over an object which has a unique id for each object values and return the values to a React component
- checking for first key in map with reactjs
- function call is returning last key for every call in react js inside map function
- ReactJS conditional display of elements with map function is returning that my object or key is 'undefined'
- how to create React search filter for search multiple object key values
- ReactJS - setState of Object key in Array
- Lodash: filter then map over an object
- How to specify a key for React children when mapping over an array
- Use different key for searching instead of value or label in react-select in reactJS
- Difference between anonymous function vs named function as value for an object key
- Reactjs Redux should we create sub reducer for every object in the state tree?
- How to handle window object on nodejs for server-side rendering of reactjs application
- How to make key value of map function increment for each element in JavaScript
- Can we use object destructuring for useState() in reactjs hooks?
- How can i get array of object from this data for state and count in reactjs
- ReactJS setState with multidimensional object and dynamic key
- ReactJS syntax for if else with map function in branch
- JSON object vs window variable for passing server-side rendered initial state using reactjs
- TypeScript type for value of key in object
- ReactJS - Handling onClick events for an entire section except for a few child elements
- Set all values of nested object to false except for one
- Fetch Foreign key object from an api using reactjs
- How to inline JSON object as map of attributes and values for component?
- Getting null object on console for the first run in reactjs
- JavaScript how to map over two arrays one object
- React JS: set all values of nested object to false except for one
More Query from same tag
- Storybook override import method
- Replace Text with Content Editable in ReactJS
- Pass props to makeStyles and use in CSS shorthand property in Material UI
- Creating a Docker Container to deploy to a prod env
- How to pass an Array from Parent Component to Child Component in react by using Statefull Component?
- React JS sticky navigation onScroll
- Error: Cannot read property 'props' of undefined
- React JS how to pass values between pages using session storage
- Multiple nested IndexRoutes not registering
- How to define custom props in a react functional component with typescript?
- when i use mobx with react-router here is a warning
- Invalid hook call which I can't seem to fix
- How can I validate an input's value on user keyboard entry?
- Where do we place assets (like pictures) and how do we load them on a React + Flux web app component?
- Webpack image loader Error
- Three js converting an equirectangular panorama to cubemap format using NEXT JS
- What is the use of @connect decorator in react-redux
- Unable to call function inside context hook
- Is there a way to make a custom border in CSS?
- useState does not update the value on Component Re-render
- Second Line of Else Block Not Running
- make flex-item honour width only if there is content
- redirect all `*` to specific path in nextjs
- React Complex Form Editing key value pair
- Reusable modal in ReactJs
- Strange string conditions in JavaScript
- Set i18next language based on HTML tag
- React.js deal with missing data in json (TypeError: Cannot read property 'prefix' of null)
- Docker app won`t work but application works if not in docker
- React.js throttle mousemove event keep throwing event.persist() error