Arrays 反应：如何在“我的菜单”部分显示来自道具的数据
我面临一个从API中提取Json数据的问题。 想在菜单中显示我的食物。 请帮我解决这个问题 JSON 我想在单击时将packageMenu数据显示到我的选项卡中 JSXArrays 反应：如何在“我的菜单”部分显示来自道具的数据,arrays,json,reactjs,tabs,Arrays,Json,Reactjs,Tabs,我面临一个从API中提取Json数据的问题。 想在菜单中显示我的食物。 请帮我解决这个问题 JSON 我想在单击时将packageMenu数据显示到我的选项卡中 JSX render（） { var面板=[]； var面板1=[]； this.props.packageList.map（函数（行，i） { 让头= {row.Name} {“INR”+generalUtil.priceFormat（row.Price）} ; 设foodMenus=[]； if（row.packagemens！=“
render（）
{
var面板=[]；
var面板1=[]；
this.props.packageList.map（函数（行，i）
{
让头=
{row.Name}
{“INR”+generalUtil.priceFormat（row.Price）}
;
设foodMenus=[]；
if（row.packagemens！=“未定义”&&typeof row.packagemens.food！=“未定义”）
{
让计数=0；
用于（将i1放在第行包装菜单食品中）
{
设row1=row.packageMenu.food[i1]；
食物推(
{row1.Quantity+“”+row1.menusName}
);
计数++；
}
}
让Liqueormenus=[]；
if（row.packagemens！=“未定义”&&typeof row.packagemens.liquity！=“未定义”）
{
让计数=0；
用于（将i1放在第行包装菜单中）
{
设row1=row.packageMenu.Liquis[i1]；
利库曼努斯(
{row1.Quantity+“”+row1.menusName}
);
计数++；
}
}
如果（this.state.isShowAllPackages==true | | i
{
面板长度>0？
{面板}
:
''
}
{
面板长度>0？
{panels1}
:
''
}
{
this.state.isShowAllPackages==false&&this.props.packageList.length>6
?
显示更多包
:
""
}
)
}
感谢您使用工作代码编辑您的代码
let response = {
"0": {
...
},
"1": {
...
},
"package_list_count": 4,
"status": true
};
render()
{
let response = this.props.packageList;
let responseKeys = Object.values(response);
var panels = [];
var panels1 = [];
responseKeys.map((row, i)=>{
let head =
<div key={i} className="panel-title">
<div className="pull-left">
<h4>{row.Name}</h4>
<span className="strike">{"INR " + generalUtil.priceFormat(row.Price)}</span>
</div>
<a className={"pull-right glyphicon glyphicon-plus"} />
<div className="clearfix"></div>
</div>;
let foodMenus = [];
if(typeof row.packageMenu != 'undefined' && typeof row.packageMenu.food != 'undefined')
{
let count = 0;
for(let i1 in row.packageMenu.food)
{
let row1 = row.packageMenu.food[i1];
foodMenus.push(
<li key={count}>{row1.Quantity + " " + row1.menusName}</li>
);
count++;
}
}
let liquorMenus = [];
if(typeof row.packageMenu != 'undefined' && typeof row.packageMenu.liquor != 'undefined')
{
let count = 0;
for(let i1 in row.packageMenu.liquor)
{
let row1 = row.packageMenu.liquor[i1];
liquorMenus.push(
<li key={count}>{row1.Quantity + " " + row1.menusName}</li>
);
count++;
}
}
if(this.state.isShowAllPackages == true || i <= 5)
{
if(row.PackageType == 1)
{
panels.push(
<div key={i} data-trigger={head}>
<div className="panel-body">
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.food != 'undefined'
?
<ul className="list-inline food-menu">
{foodMenus}
</ul>
:
""
}
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.liquor != 'undefined'
?
<ul className="list-inline liquor-menu">
<li>Liquor Menu :</li>
{liquorMenus}
</ul>
:
""
}
</div>
</div>
)
}
else
{
panels1.push(
<div key={i} data-trigger={head}>
<div className="panel-body">
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.food != 'undefined'
?
<ul className="list-inline food-menu">
{foodMenus}
</ul>
:
""
}
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.liquor != 'undefined'
?
<ul className="list-inline liquor-menu">
<li>Liquor Menu :</li>
{liquorMenus}
</ul>
:
""
}
</div>
</div>
)
}
}
});
return(
<section className="packageSection">
<div className="container-fluid">
<div className="row">
<div className="col-md-1"></div>
<div className="col-md-10">
<div className=" col-xs-12 col-md-12 header-web hidden-xs">
<h3 className="header-title">Food Packages</h3>
<p className="child-links"><a href={this.props.BASE_URL + 'home'}>Home</a> / Food Packages</p>
</div>
<div className="col-xs-12 food-header-image">
</div>
<Tabs defaultActiveKey={panels.length > 0?1:2} id="uncontrolled-tab-example" className="packageListMenu hidden-xs">
{
panels.length > 0?
<div className="menu-container veg-nonveg col-md-6">
<span className="web-veg">Veg Packages</span> <span className="vegmenu"></span>
<Accordion>
<AccordionItem>
{panels}
</AccordionItem>
</Accordion>
</div>
:
''
}
{
panels.length > 0?
<div className="menu-container veg-nonveg col-md-6">
<span className="web-nonveg">Non - Veg Packages</span><span className="nonvegmenu"></span>
<Accordion>
{panels1}
</Accordion>
</div>
:
''
}
</Tabs>
<Tabs defaultActiveKey={panels.length > 0?1:2} id="uncontrolled-tab-example" className="packageListMenu hidden-lg">
{
panels.length > 0?
<Tab eventKey={1} title={<div className="menu-container"><span className="vegmenu"></span><span>VEG PACKAGES</span></div>}>
<Accordion>
{panels}
</Accordion>
</Tab>
:
''
}
{
panels.length > 0?
<Tab eventKey={2} title={<div className="menu-container"><span className="novegmenu"></span><span>NON-VEG PACKAGES</span></div>}>
<Accordion>
{panels1}
</Accordion>
</Tab>
:
''
}
</Tabs>
<div className="body">
<div className="text-center">
{
this.state.isShowAllPackages == false && this.props.packageList.length > 6
?
<button className="btn btn-primary showMore" onClick={this.showPackages.bind(this)} >
Show More Packages
</button>
:
""
}
</div>
</div>
</div>
<div className="col-md-1"></div>
</div>
</div>
</section>
)
}
let响应={
"0": {
...
},
"1": {
...
},
“包装清单计数”：4，
“状态”：正确
};
render（）
{
让响应=this.props.packageList；
让responseKeys=Object.values（响应）；
var面板=[]；
var面板1=[]；
map（（行，i）=>{
让头=
{row.Name}
{“INR”+generalUtil.priceFormat（row.Price）}
/食品包装
0？1:2}id=“非受控选项卡示例”className=“packageListMenu hidden xs”>
{
面板长度>0？
蔬菜包装
{面板}
:
''
}
{
面板长度>0？
非蔬菜包装
{panels1}
:
''
}
0？1:2}id=“非受控选项卡示例”className=“packageListMenu hidden lg”>
{
面板长度>0？
{面板}
:
''
}
{
面板长度>0？
{panels1}
render()
{
var panels = [];
var panels1 = [];
this.props.packageList.map(function(row, i)
{
let head =
<div key={i} className="panel-title">
<div className="pull-left">
<h4>{row.Name}</h4>
<span className="strike">{"INR " + generalUtil.priceFormat(row.Price)}</span>
</div>
<a className={"pull-right glyphicon glyphicon-plus"} />
<div className="clearfix"></div>
</div>;
let foodMenus = [];
if(typeof row.packageMenu != 'undefined' && typeof row.packageMenu.food != 'undefined')
{
let count = 0;
for(let i1 in row.packageMenu.food)
{
let row1 = row.packageMenu.food[i1];
foodMenus.push(
<li key={count}>{row1.Quantity + " " + row1.menusName}</li>
);
count++;
}
}
let liquorMenus = [];
if(typeof row.packageMenu != 'undefined' && typeof row.packageMenu.liquor != 'undefined')
{
let count = 0;
for(let i1 in row.packageMenu.liquor)
{
let row1 = row.packageMenu.liquor[i1];
liquorMenus.push(
<li key={count}>{row1.Quantity + " " + row1.menusName}</li>
);
count++;
}
}
if(this.state.isShowAllPackages == true || i <= 5)
{
if(row.PackageType == 1)
{
panels.push(
<div key={i} data-trigger={head}>
<div className="panel-body">
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.food != 'undefined'
?
<ul className="list-inline food-menu">
{foodMenus}
</ul>
:
""
}
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.liquor != 'undefined'
?
<ul className="list-inline liquor-menu">
<li>Liquor Menu :</li>
{liquorMenus}
</ul>
:
""
}
<div>
{
this.props.sessionData.isEnquiryCreated == false
?
<button className="btn btn-primary"
onClick={this.clickGetFinalPriceClick.bind(this)}>
Get Final Price
</button>
:
""
}
</div>
</div>
</div>
)
}
else
{
panels1.push(
<div key={i} data-trigger={head}>
<div className="panel-body">
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.food != 'undefined'
?
<ul className="list-inline food-menu">
{foodMenus}
</ul>
:
""
}
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.liquor != 'undefined'
?
<ul className="list-inline liquor-menu">
<li>Liquor Menu :</li>
{liquorMenus}
</ul>
:
""
}
<div>
{
this.props.sessionData.isEnquiryCreated == false
?
<button className="btn btn-primary"
onClick={this.clickGetFinalPriceClick.bind(this)}>
Get Final Price
</button>
:
""
}
</div>
</div>
</div>
)
}
}
}, this);
return(
<section className="packageSection">
<div className="container-fluid">
<div className="row">
<div className="col-md-1"></div>
<div className="col-md-10">
<div className="title">
<h2>PACKAGES</h2>
</div>
<Tabs defaultActiveKey={panels.length > 0?1:2} id="uncontrolled-tab-example" className="packageListMenu">
{
panels.length > 0?
<Tab eventKey={1} title={<div className="menu-container"><span className="vegmenu"></span><span>Veg</span></div>}>
<Accordion>
{panels}
</Accordion>
</Tab>
:
''
}
{
panels.length > 0?
<Tab eventKey={2} title={<div className="menu-container"><span className="novegmenu"></span><span>Non Veg</span></div>}>
<Accordion>
{panels1}
</Accordion>
</Tab>
:
''
}
</Tabs>
<div className="body">
<div className="text-center">
{
this.state.isShowAllPackages == false && this.props.packageList.length > 6
?
<button className="btn btn-primary showMore" onClick={this.showPackages.bind(this)} >
Show More Packages
</button>
:
""
}
</div>
</div>
</div>
<div className="col-md-1"></div>
</div>
</div>
</section>
)
}
let response = {
"0": {
...
},
"1": {
...
},
"package_list_count": 4,
"status": true
};
render()
{
let response = this.props.packageList;
let responseKeys = Object.values(response);
var panels = [];
var panels1 = [];
responseKeys.map((row, i)=>{
let head =
<div key={i} className="panel-title">
<div className="pull-left">
<h4>{row.Name}</h4>
<span className="strike">{"INR " + generalUtil.priceFormat(row.Price)}</span>
</div>
<a className={"pull-right glyphicon glyphicon-plus"} />
<div className="clearfix"></div>
</div>;
let foodMenus = [];
if(typeof row.packageMenu != 'undefined' && typeof row.packageMenu.food != 'undefined')
{
let count = 0;
for(let i1 in row.packageMenu.food)
{
let row1 = row.packageMenu.food[i1];
foodMenus.push(
<li key={count}>{row1.Quantity + " " + row1.menusName}</li>
);
count++;
}
}
let liquorMenus = [];
if(typeof row.packageMenu != 'undefined' && typeof row.packageMenu.liquor != 'undefined')
{
let count = 0;
for(let i1 in row.packageMenu.liquor)
{
let row1 = row.packageMenu.liquor[i1];
liquorMenus.push(
<li key={count}>{row1.Quantity + " " + row1.menusName}</li>
);
count++;
}
}
if(this.state.isShowAllPackages == true || i <= 5)
{
if(row.PackageType == 1)
{
panels.push(
<div key={i} data-trigger={head}>
<div className="panel-body">
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.food != 'undefined'
?
<ul className="list-inline food-menu">
{foodMenus}
</ul>
:
""
}
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.liquor != 'undefined'
?
<ul className="list-inline liquor-menu">
<li>Liquor Menu :</li>
{liquorMenus}
</ul>
:
""
}
</div>
</div>
)
}
else
{
panels1.push(
<div key={i} data-trigger={head}>
<div className="panel-body">
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.food != 'undefined'
?
<ul className="list-inline food-menu">
{foodMenus}
</ul>
:
""
}
{
typeof row.packageMenu != 'undefined' &&
typeof row.packageMenu.liquor != 'undefined'
?
<ul className="list-inline liquor-menu">
<li>Liquor Menu :</li>
{liquorMenus}
</ul>
:
""
}
</div>
</div>
)
}
}
});
return(
<section className="packageSection">
<div className="container-fluid">
<div className="row">
<div className="col-md-1"></div>
<div className="col-md-10">
<div className=" col-xs-12 col-md-12 header-web hidden-xs">
<h3 className="header-title">Food Packages</h3>
<p className="child-links"><a href={this.props.BASE_URL + 'home'}>Home</a> / Food Packages</p>
</div>
<div className="col-xs-12 food-header-image">
</div>
<Tabs defaultActiveKey={panels.length > 0?1:2} id="uncontrolled-tab-example" className="packageListMenu hidden-xs">
{
panels.length > 0?
<div className="menu-container veg-nonveg col-md-6">
<span className="web-veg">Veg Packages</span> <span className="vegmenu"></span>
<Accordion>
<AccordionItem>
{panels}
</AccordionItem>
</Accordion>
</div>
:
''
}
{
panels.length > 0?
<div className="menu-container veg-nonveg col-md-6">
<span className="web-nonveg">Non - Veg Packages</span><span className="nonvegmenu"></span>
<Accordion>
{panels1}
</Accordion>
</div>
:
''
}
</Tabs>
<Tabs defaultActiveKey={panels.length > 0?1:2} id="uncontrolled-tab-example" className="packageListMenu hidden-lg">
{
panels.length > 0?
<Tab eventKey={1} title={<div className="menu-container"><span className="vegmenu"></span><span>VEG PACKAGES</span></div>}>
<Accordion>
{panels}
</Accordion>
</Tab>
:
''
}
{
panels.length > 0?
<Tab eventKey={2} title={<div className="menu-container"><span className="novegmenu"></span><span>NON-VEG PACKAGES</span></div>}>
<Accordion>
{panels1}
</Accordion>
</Tab>
:
''
}
</Tabs>
<div className="body">
<div className="text-center">
{
this.state.isShowAllPackages == false && this.props.packageList.length > 6
?
<button className="btn btn-primary showMore" onClick={this.showPackages.bind(this)} >
Show More Packages
</button>
:
""
}
</div>
</div>
</div>
<div className="col-md-1"></div>
</div>
</div>
</section>
)
}