在AngularJS中获取嵌套的JSON值

时间:2017-09-22 09:54:25

标签: javascript angularjs json ionic-framework

我正在尝试从json中提取数据并在离子应用程序中显示
我试图提取Indivisualservice的价格和名称并成功,但是当我尝试获取HalfservName和HalfPrepareprice时,我感到震惊

数据:

 {
            "_id" : ObjectId("59bba8696d8e3"),
            "username" : "tt@gmail.com",
            "service_offered" : {
                "IndivisualService" : [ 
                    {
                        "Price" : "111",
                        "Name" : "catering",
                        "_id" : ObjectId("59bba9046d62535d77e548e6")
                    }, 
                    {
                        "Price" : "1111",
                        "Name" : "delivery",
                        "_id" : ObjectId("59bba9046d62535d77e548e5")
                    }
                ],
                "half_service" : {
                    "HalfservType" : {
                        "HalfservName" : [ 
                            "halfPrepare1", 
                            "halfPrepare2", 
                            "halfPrepare3"
                        ],
                        "HalfPrepareprice" : 1000
                    }
                }
            },
            "city" : "ttt" }

控制器:

$scope.details=response.data;

视图:

  <ul>
    <li ng-repeat="servicesoffered in details">
    <span ng-show='servicesoffered.IndivisualService.length > 0'>
                <span>Indivisual Service</span>
        <ul>
            <li ng-show='servicesoffered.IndivisualService.length > 0' ng-repeat="IndiService in servicesoffered.IndivisualService">
                <a>Service: {{IndiService.Name}}</a>
                <a>Price: {{IndiService.Price}}</a></li>
        </ul>
    </span>
    </li>
</ul>

尝试获取HalfservName和HalfPrepareprice但失败了。 任何人都可以帮助获取HalfservName和HalfPrepareprice

<ul>
    <li ng-repeat="servicesoffered in details">
    <span ng-show='servicesoffered.half_service.HalfservType.HalfservName.length > 0'>
                <span>Half Service</span>
        <ul>
            <li 
                ng-repeat="halfServiceoffered in servicesoffered
.half_service.HalfservType">
                <a>Service: {{halfServiceoffered.HalfservName}}</a>
               </li>
        </ul>
    </span>
</li>
</ul>

1 个答案:

答案 0 :(得分:0)

HalfservType是一个对象。但是你可能想要迭代HalfservName数组。所以这是更新的代码:

<li ng-repeat="halfServiceName in servicesoffered.half_service.HalfservType.HalfservName">
   <a>Service: {{halfServiceName}}</a>
</li>