How to map sequentially numbered properties of object in reactjs

Question

I have an object that represents an E-Commerce Item.

In addition to normal properties like item.name, item.number and item.price, each item has 20 metadata properties. i.e. item.metadata1Active, item.metadata1Name and item.metadata1 etc.

I need to do a loop of some type over each property named metadataXActive and if true display the corresponding/matching metadataXName and metadataX properties.

I have the first 10 displaying without a loop:

function unflatten(item) {          
    return (
        <div className="metabox">
            {item.metadata1Active === true ? (<p><label className="metadata">{item.metadata1Name}</label>: <label className="metadata">{item.metadata1}</label></p>) : null}
            {item.metadata2Active === true ? (<p><label className="metadata">{item.metadata2Name}</label>: <label className="metadata">{item.metadata2}</label></p>) : null }
            {item.metadata3Active === true ? (<p><label className="metadata">{item.metadata3Name}</label>: <label className="metadata">{item.metadata3}</label></p>) : null }
            {item.metadata4Active === true ? (<p><label className="metadata">{item.metadata4Name}</label>: <label className="metadata">{item.metadata4}</label></p>) : null}
            {item.metadata5Active === true ? (<p><label className="metadata">{item.metadata5Name}</label>: <label className="metadata">{item.metadata5}</label></p>) : null}
            {item.metadata6Active === true ? (<p><label className="metadata">{item.metadata6Name}</label>: <label className="metadata">{item.metadata6}</label></p>) : null}
            {item.metadata7Active === true ? (<p><label className="metadata">{item.metadata7Name}</label>: <label className="metadata">{item.metadata7}</label></p>) : null}
            {item.metadata8Active === true ? (<p><label className="metadata">{item.metadata8Name}</label>: <label className="metadata">{item.metadata8}</label></p>) : null}
            {item.metadata9Active === true ? (<p><label className="metadata">{item.metadata9Name}</label>: <label className="metadata">{item.metadata9}</label></p>) : null}
            {item.metadata10Active === true ? (<p><label className="metadata">{item.metadata10Name}</label>: <label className="metadata">{item.metadata10}</label></p>) : null}
        </div>
    );
}

Any help will be appreciated.

Answer 1

You could do the following:

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

Like the answer in this stack: https://stackoverflow.com/a/16735184/12792486

Answer 2

Since you know there are 20 metadata properties, you can just iterate 20 times and check each using bracket notation and a template literal.

function unflatten(item) {

  return (
    <div className='metabox'>
      {[...Array(20).keys()].map((i) => (
        item[`metadata${i+1}Active`] === true
          ? (<p key={`metadata${i+1}Name`}>
            <label className='metadata'>{item[`metadata${i+1}Name`]}</label>:{' '}
            <label className='metadata'>{item[`metadata${i+1}`]}</label>
          </p>)
          : null
      ))
      }
    </div>
  );
}

Answer 3

You could use the new Object.hasOwn method which checks if the specified object has the indicated property as its own property. If the property is inherited, or does not exist, the method will return false.

if (Object.hasOwn(obj, 'propertyName')){
  // do stuff
}

More about Object.hasOwn - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn

Answer 4

If your object item has only metadaXActive props I would suggest this

function unflatten(item) {          
return (
    <div className="metabox">`
      {{
    for (const metadata in item) {
     item[metadata] === true ?
       // here if true.           
       :
       // here if false
       }
      }}
    </div>