我在這一點上撞牆了。我的json文件已連接(我在Chrome控制檯中進行了驗證),但未顯示在我的services.html頁面上。我究竟做錯了什麼?在解決我的問題時,我將所有數據都放在了js文件中,並能夠使其工作,但出於顯而易見的原因,我想使用json文件連接我的數據。我正在使用AngularJS 1.6.2。爲什麼我的JSON數據顯示在AngularJS中?
(function() {
'use strict';
// Create module and give it a name
// also include ngRoute dependency in order to route to different pages
var makeupApp = angular.module('makeupApp', ['ngRoute']);
// Configure the routes
makeupApp.config(function ($routeProvider) {
$routeProvider
// route for home page
.when('/', {
templateUrl: 'pages/home.html'
})
// route for bio page
.when('/bio', {
templateUrl: 'pages/bio.html'
})
// route for services page
.when('/services', {
templateUrl: 'pages/services.html'
})
// route for contact page
.when('/contact', {
templateUrl: 'pages/contact.html'
})
.otherwise({
templateUrl: 'pages/404.html'
});
});
makeupApp.controller('PortfolioCtrl', function() {
this.portfolio = pictures;
pictures = [
{
image: 'assets/img/photoshoot.jpg'
}
];
});
makeupApp.controller('ServicesCtrl', function ($scope, $http) {
$http.get("../assets/services.json").then(function (response) {
$scope.products = response.data;
});
});
})();
<div class="container" ng-controller="ServicesCtrl as service">
<div class="row">
<!--Services Section-->
<div id="glam-menu" class="menu-container">
<div class="menu">
<div class="menu-basic text-center">
<div class="col-md-12">
<h3><span class="section-title">General Makeup Application</span></h3>
<p>voluptatibus arbitrantur illum illum sunt concursionibus cupidatat possumus
doctrina cillum labore eiusmod fidelissimae quibusdam laborum cupidatat dolor
quem ullamco sed.</p>
</div>
</div>
<div class="menu-description" ng-repeat="product in service.products">
<div class="col-md-6">
<div class="clearfix">
<div class="pull-left"><strong>{{product.general[0].name}}</strong></div>
<div class="pull-right">{{product.general[0].price | currency}}</div>
</div>
<p class="clearfix"><strong>{{product.general[0].service-description}}</strong></p>
</div>
</div>
</div>
</div>
<!--Services Section-->
</div>
</div>
[{
"general": [
{
"name": "Makeup in the Studio",
"price": 60,
"service-description": "quamquam nescius multos quo singulis tamen philosophari cupidatat deserunt offendit veniam te excepteur probant laboris qui in deserunt quid legam"
},
{
"name": "On Location Makeup Service",
"price": 80,
"service-description": "Makeup application at the location of the client's choice. Price includes lashes, and travel within a 30 mile radius of the LDM Studio. All makeup at a chair are provided. Supplemental lighting and a table are not provided."
}
],
"bridal": [
{
"name": "Consultations",
"price": 60,
"service-description": "1) Price is for a second consultation for the client who has booked services. 2) Price is for first consultation if client does not book services. 3) Price is for a consultation for anyone associated with the bridal party."
},
{
"name": "Blushing Bride",
"price": 125,
"service-description": "On Location Makeup Application for your wedding."
},
{
"name": "Bridal Entourage",
"price": 80,
"service-description": "On Location Makeup application for anyone associated with the Bride on the Wedding Day."
},
{
"name": "VIP Bride",
"price": 225,
"service-description": "On Location Makeup Application and extended stay for touch ups before the ceremony and after the ceremony."
},
{
"name": "Princess Treatment",
"price": 60,
"service-description": "On Location Makeup application on Wedding Day for girls under 17 yrs old and under"
},
{
"name": "Celebrity Bride",
"price": 350,
"service-description": "On Location Makeup application for your Wedding, and 3 other Wedding related events. Includes one consultation and 30 mile travel."
},
{
"name": "Tattoo Cover",
"price": 50,
"service-description": "Starting Price. Pricing depends on size and depth of color. Please contact for more information."
}
],
"production": [
{
"name": "Half Day Rate",
"price": 250,
"service-description": "On location makeup services for up to 3.5 hours."
},
{
"name": "Full Day Rate",
"price": 500,
"service-description": "On location makeup services for up to 8 hours."
}
],
"lessons": [
{
"name": "Makeup Lesson",
"price": 125,
"service-description": "Interactive Lesson suited to client needs. Common elements listed below, but not limited to. I gear it towards your needs and wants. 1) Approx 2 hours. 2) Located at the LDM Studio. 3) Makeup bag analysis. What to keep and what to toss. 4) Feature and color analysis. 5) Techniques to achieve 2 different looks: day and night. 6) Tools and product description and suggestions. 7) False lash application lesson. 8) Hands on and demonstration teaching. 9) Post lesson open door policy. Email me about anything makeup related! Any and all questions will be answered in a timely fashion."
},
{
"name": "Concierge Makeup Shopping",
"price": 100,
"service-description": "In addition, for clients who have booked a Lesson. Don't be intimidated by large cosmetics departments or pushy sales people. I will navigate you to the products you need as well as others that you might be interested in investing in later. I will introduce you to people who can assist you in the future with your shopping experience in conjunction with my help. *Travel with client to International Plaza in Tampa, FL to shop for products."
}
]
}]
沒有工作,很遺憾。這是我之前嘗試過的一件事。 –
問題是你的數組包含對象內部的對象。所以你需要先訪問對象。 – Sajeetharan