如何使用angularjs显示嵌套的JSON数据

时间：2017-05-25 10:25:42

标签： javascript angularjs json

我试图使用下面的代码在Angular控制器中调用JSON文件，我花了2天时间但没有任何效果，请帮忙

＆＃13;
＆＃13; 
[{
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}, {
    "enquiry_data": {
        "car_model": "images/mercedes-gla-class-primary.jpg",
        "car_name": "gla-class",
        "user_name": "sanjay",
        "user_phone": "9874563210",
        "status": "active",
        "status_stage": "test drive given",
        "date": "05 may 2017",
        "time": "02:50 pm",
        "timeline": {
            "0": {
                "status": "accepted",
                "date": "15 may"
            },
            "1": {
                "status": "follow up",
                "date": "18 may"
            },
            "2": {
                "status": "follow up",
                "date": "20 may"
            },
            "3": {
                "status": "next",
                "date": "24 may"
            }
        }
    }
}]
-------------------------------------------
var enquiryApp = angular.module('enquiryList', []); 
enquiryApp.controller('enquiryCtrl', function($scope, $http){
	$http.get('js/timeLine.json').then(function(data){
		// $scope.features = response.data;
		$scope.enqList = [];
		angular.forEach(data, function(enquiry_data){
			angular.forEach(enquiry_data.timeline, function(timeline){
				$scope.enqList.push({
					enqList:enquiry_data.car_name,
				});

			});
			console.log($scope.enqList.car_name);
		});
		// console.log(response.data.items[0].enquiry_data.car_name);
	});
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-controller="enquiryCtrl">
    <div class="enquery-block" ng-repeat="x in enqList">

        <div class="enquiryInfo">
            <div class="row">
                <div class="col-sm-3">
                    <img src="images/mercedes-gla-class-primary.jpg" class="img-responsive" alt="b Class">
                    <figcaption>{{x.car_name}}</figcaption>
                </div>
                <div class="col-sm-6">
                    <h1>sanjay kumar singh</h1>
                    <h3>9876543210</h3>

                </div>
                <div class="col-sm-3">
                    <div class="enqStatus">
                        <p><i class="fa fa-circle green"></i>active</p>
                        <p>test drive given</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="enquirystatus">
            <div id="timeLine" class="timeLine">
                <div class="line"></div>
                <ul>
                    <li>
                        <div class="staDate">
                            <p>Accepted</p>
                            <p>22 May</p>
                        </div>
                        <span></span>
                    </li>
                </ul>
            </div>
        </div>


        <div class="enquiryAction">
            <div class="row">
                <div class="col-sm-6">
                    <div><span><img src="images/calendar.png"></span>22 May 2017 <span>/</span> 02:15 pm</div>
                </div>
                <div class="col-sm-6">
                    <button class="btn btn-default pull-right" data-toggle="modal" data-target="#statusModal">add follow up</button>
                </div>
            </div>
        </div>

    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

事情正在发挥作用，我正在尝试在Angular控制器中调用JSON文件并希望在视图中显示数据，但没有错误且没有任何工作，下面是我的代码，请帮助。

2 个答案:

答案 0 :(得分：0)

你应该替换：

$scope.enqList.push({
    enqList : enquiry_data.car_name,
});

with：

$scope.enqList.push({
    car_name: enquiry_data.car_name,
});

现在这样可行：

<div class="enquery-block" ng-repeat="x in enqList">
   <figcaption>{{x.car_name}}</figcaption>
</div>

答案 1 :(得分：0)

这是解决方案。

 var app = angular.module('demo', []);
    app.controller('MainCtrl', function($scope, $http) {
    $http.get("data.json").then(function(data){
     $scope.rooms = data.data;
     console.log($scope.rooms);
    });
    });



    <ul ng-repeat="x in rooms" class="list">
     <li>{{x.car_model}}</li>
       <ul ng-repeat="b in x.timeline" class="timeline">
        <li>
            <p>{{b.stat}}</p>
            <p>{{b.date}}</p>
        </li>
       </ul>
     </ul>
相关问题
最新问题