Реагируйте: как показать мои данные с реквизита в моем разделе меню

Question

У меня проблема с извлечением данных Json, поступающих из API.Хочу показать мою еду в моем меню.Пожалуйста, помогите мне решить эту проблему.

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: строка не определена.

Любая помощь будет благодарна.

Спасибо

Answer 1

Редактирование вашего с рабочим кодом.

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>
    )
}