[英]How to map sequentially numbered properties of object in reactjs
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.除了
item.name
、 item.number
和item.price
等常规属性item.price
,每个项目还有 20 个元数据属性。 ie item.metadata1Active
, item.metadata1Name
and item.metadata1
etc.即
item.metadata1Active
, item.metadata1Name
和item.metadata1
等。
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.我需要对每个名为
metadataXActive
属性执行某种类型的循环,如果为 true,则显示相应/匹配的metadataXName
和metadataX
属性。
I have the first 10 displaying without a loop:我有前 10 个没有循环显示:
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.任何帮助将不胜感激。
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就像这个堆栈中的答案: https : //stackoverflow.com/a/16735184/12792486
Since you know there are 20 metadata properties, you can just iterate 20 times and check each using bracket notation and a template literal .由于您知道有 20 个元数据属性,因此您只需迭代 20 次并使用括号表示法和模板文字检查每个属性。
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>
);
}
You could use the new Object.hasOwn
method which checks if the specified object has the indicated property as its own property.您可以使用新的
Object.hasOwn
方法来检查指定的对象是否将指定的属性作为其自己的属性。 If the property is inherited, or does not exist, the method will return false.如果该属性被继承或不存在,则该方法将返回 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更多关于
Object.hasOwn
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn
If your object item has only metadaXActive props I would suggest this如果您的对象项目只有 metadaXActive 道具,我会建议这样做
function unflatten(item) {
return (
<div className="metabox">`
{{
for (const metadata in item) {
item[metadata] === true ?
// here if true.
:
// here if false
}
}}
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.