arrays - 反应：如何在我的菜单部分显示我的道具数据
问题描述
我在提取来自 API 的 Json 数据时遇到问题。想在我的菜单中显示我的食物。请帮我解决这个问题。
JSON
{
"0": {
"packagesId": "383",
"RestaurantId": "333",
"Name": "Standard Veg Package",
"PackageType": "1",
"package_occasion": "2",
"liqure_unlimit": "0",
"LiqureType": "0",
"Price": "1700",
"Tax": "23",
"Remark": "",
"if_active": "1",
"packageMenu": {
"food": {
"2": {
"packageBuilderId": "6522",
"PackageId": "383",
"MenuType": "1",
"menusName": "Welcome Drink",
"menusVegNonveg": "0",
"Quantity": "2",
"liqure_brand": null
},
"3": {
"packageBuilderId": "6530",
"PackageId": "383",
"MenuType": "12",
"menusName": "Salad",
"menusVegNonveg": "0",
"Quantity": "5",
"liqure_brand": null
},
"5": {
"packageBuilderId": "6523",
"PackageId": "383",
"MenuType": "2",
"menusName": "Veg Starter",
"menusVegNonveg": "0",
"Quantity": "4",
"liqure_brand": null
},
"7": {
"packageBuilderId": "6524",
"PackageId": "383",
"MenuType": "4",
"menusName": "Veg Main Course",
"menusVegNonveg": "0",
"Quantity": "4",
"liqure_brand": null
}
}
},
"packageTypeName": "Veg",
"packageOccasionName": "Dinner",
"liqureUnlimitName": "No"
},
"1": {
"packagesId": "384",
"RestaurantId": "333",
"Name": "Premium Veg Package",
"PackageType": "1",
"package_occasion": "2",
"liqure_unlimit": "0",
"LiqureType": "0",
"Price": "1900",
"Tax": "23",
"Remark": "",
"if_active": "1",
"packageMenu": {
"food": {
"2": {
"packageBuilderId": "6546",
"PackageId": "384",
"MenuType": "1",
"menusName": "Welcome Drink",
"menusVegNonveg": "0",
"Quantity": "3",
"liqure_brand": null
},
"3": {
"packageBuilderId": "6554",
"PackageId": "384",
"MenuType": "12",
"menusName": "Salad",
"menusVegNonveg": "0",
"Quantity": "6",
"liqure_brand": null
},
"5": {
"packageBuilderId": "6547",
"PackageId": "384",
"MenuType": "2",
"menusName": "Veg Starter",
"menusVegNonveg": "0",
"Quantity": "6",
"liqure_brand": null
},
"7": {
"packageBuilderId": "6548",
"PackageId": "384",
"MenuType": "4",
"menusName": "Veg Main Course",
"menusVegNonveg": "0",
"Quantity": "4",
"liqure_brand": null
},
"9": {
"packageBuilderId": "6552",
"PackageId": "384",
"MenuType": "10",
"menusName": "Dal",
"menusVegNonveg": "0",
"Quantity": "2",
"liqure_brand": null
},
"10": {
"packageBuilderId": "6551",
"PackageId": "384",
"MenuType": "9",
"menusName": "Rice",
"menusVegNonveg": "0",
"Quantity": "2",
"liqure_brand": null
}
}
},
"packageTypeName": "Veg",
"packageOccasionName": "Dinner",
"liqureUnlimitName": "No"
},
"package_list_count": 4,
"status": true
}
我想在单击时将 packageMenu 数据显示到我的选项卡中。
JSX
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>
)
}
我试过这个，但它返回了 Uncaught ReferenceError: row is not defined。
任何帮助都会很棒。
谢谢
解决方案
用工作代码编辑你的。
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>
)
}
推荐阅读
- python - 如果我取随机整数，如何无余数除法？
- c++ - 如何应用相机校准将图像中的二维点转换为方位矢量？
- windows - 单击取消按钮时，如何使脚本停止？
- ruby-on-rails - 万能钥匙未生成轨道 6
- php - 将文件存储在存储文件夹之外
- python - Pandas，在整行上应用两个函数的最有效方法
- c++ - RTSP 音频反向通道 (ONVIF) - 如何实现
- getstream-io - 如何将自定义 Header 添加到 Stream Feed Activity？
- drupal - 如何在块树枝模板中显示当前页面的字段
- sql - 如何在sql中具有一定数量的重复项的范围之间创建一个随机数