0

私はこの時点で壁に当たった。 jsonファイルが接続されています(Chromeコンソールで確認済みですが、services.htmlページに表示されません)。私は間違って何をしていますか?私の問題のトラブルシューティングでは、すべてのデータをjsファイルに入れて動作させることができましたが、明白な理由から、jsonファイルを使用してデータを接続する必要があります。私はAngularJS 1.6.2を使用しています。AngularJSにJSONデータが表示されないのはなぜですか?

(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." 
 
     } 
 
    ] 
 
}]

答えて

0

あなたは構文としてコントローラを使用しているので、this.products

makeupApp.controller('ServicesCtrl', function ($scope, $http) { 
     $http.get("../assets/services.json").then(function (response) { 
      this.products = response.data; 
     }); 
    }); 
+0

へのリンクです。それは私が以前に試したことの一つです。 –

+0

問題はあなたの配列がオブジェクトの中にオブジェクトを含んでいることです。最初にオブジェクトにアクセスする必要があります。 – Sajeetharan

0
に変更します

正しくルーピングされていません。この

  <div class="menu-description" ng-repeat="product in products"> 
 
         <div ng-repeat="p in product['general']"> 
 
          {{ p.name }} 
 
         </div> 
 
       </div>
ここ

よう するTry-ngのリピートは、残念ながら、動作しませんでしたplnkr

関連する問題