堆栈内存溢出
  繁体   English   中英

无法将json数据导入angular应用

[英]Having trouble getting json data into angular app

 原文  2016-03-30 18:17:45  2   2    javascript/ angularjs/ json

问题描述

我正在一个需要将JSON数据通过客户端技术呈现到页面的项目中。 我目前有一张要显示数据的卡片布局网格，但是，在不破坏应用程序的情况下，我很难将数据显示到页面上。

这是我当前的App.js文件行33-35，是我遇到错误的地方。 

    'use strict';

/**
 * @ngdoc overview
 * @name peapodTestApp
 * @description
 * # peapodTestApp
 *
 * Main module of the application.
 */
angular
  .module('peapodTestApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',


  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      resolve: {
      users:['$http',function($http){
        return $http.get('/api/users.json').then(function(response){
          return response.data;
        });
      }];
    }
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

这是该应用程序的main.js文件 

'use strict';

/**
 * @ngdoc function
 * @name peapodTestApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the peapodTestApp
 */
angular.module('peapodTestApp')
  .controller('MainCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma',
      'ngMaterial'
    ];


  });

以及该应用程序的main.html文件 

<header class="header">
  <h3 class="text-center">User Directory</h3>


</header>




<div class="container">
<div class="row">
<div class="col-md-6">
<flippy
    class="fancy"
    flip="['click']"
    flip-back="['click']"
    duration="800"
    timing-function="ease-in-out">

      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
        <button ng-click="bool=true">Button</button>
        </md-card-actions>
      </md-card>
      </div>
      </flippy>

<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>
    </div>
</div>

</div>
</div>


<div class="container">
<div class="row">
<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>

<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>
    </div>
</div>

</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>

<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>
    </div>
</div>

</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>

<div class="col-md-6">
      <md-card>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Card with image</span>
            <span class="md-subhead">Small</span>
          </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-sm card-media"></div>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      </div>
    </div>
</div>

</div>
</div>

<div class="row marketing">
  <h4>HTML5 Boilerplate</h4>
  <p>
    HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
  </p>

  <h4>Angular</h4>
  <p>
    AngularJS is a toolset for building the framework most suited to your application development.
  </p>

  <h4>Karma</h4>
  <p>Spectacular Test Runner for JavaScript.</p>
</div>

为了使图片更清晰地说明我所经历的内容，以下是该项目的一些屏幕截图。

首先是当App.js 33-35中的行不存在时会发生什么

我要用JSON数据填写的项目的布局

第二个显示在App.js中放置第33-35行之后的结果以及来自控制台的错误。

出现错误消息的应用程序已损坏

请记住，使用Yeoman脚手架工具构建了该应用程序的样板，因此，如果需要其他文件来帮助收集有关问题的信息，请告诉我。

谢谢

更新我现在只收到一个

angular.js：11630 GET http：// localhost：9000 / api / users.json 404（未找到）

由于从数组末尾删除了分号

更新我已经获取了所有数据，它显示在屏幕上，现在我想向项目添加模式。 我目前有一个带有侦听器的按钮，该按钮在按下时会发出警报（这只是一项测试，以确保它能正常工作。）虽然我每次都做不到，但我很难理解在何处添加模态代码……该应用程序。

这是项目的mainCtrl（main.js）部分 

'use strict';

/**
 * @ngdoc function
 * @name peapodTestApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the peapodTestApp
 */
angular.module('peapodTestApp')
  .controller('MainCtrl', function ($scope,UserService,$uibModal) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma',
      'ngMaterial'
    ];

    $scope.users = UserService;
    $scope.animationsEnabled = true;

    $scope.open = function(size){
        var modalInstance = $uibModal.open({
            animation:$scope.animationsEnabled,
            templateUrl: 'myModalContent.html',
            controller:'modalInstanceCtrl',
            size:size,
            resolve:{
                items: function(){
                    return $scope.users;
                }
            }
        });

        modalInstance.result.then(function(selectedUser){
            $scope.selected = selectedUser;
        })

    }


  })
  .service('UserService',function(){
    var user = [{

    "id": 1,

    "name": "Leanne Graham",

    "username": "Bret",

    "email": "Sincere@april.biz",

    "address": {

        "street": "Kulas Light",

        "suite": "Apt. 556",

        "city": "Gwenborough",

        "zipcode": "92998­3874",

        "geo": {

            "lat": "­37.3159",

            "lng": "81.1496"

        }

    },

    "phone": "",

    "website": "hildegard.org",

    "company": {

        "name": "Romaguera­Crona",

        "catchPhrase": "Multi­layered client­server neural­net",

        "bs": "harness real­time e­markets"

    }

},

{

    "id": 2,

    "name": "Ervin Howell",

    "username": "Antonette",

    "email": "Shanna@melissa.tv",

    "address": {

        "street": "Victor Plains",

        "suite": "Suite 879",

        "city": "Wisokyburgh",

        "zipcode": "90566­7771",

        "geo": {

            "lat": "­43.9509",

            "lng": "­34.4618"

        }

    },

    "phone": "010­692­6593 x09125",

    "website": "anastasia.net",

    "company": {

        "name": "Deckow­Crist",

        "catchPhrase": "Proactive didactic contingency",

        "bs": "synergize scalable supply­chains"

    }

},

{

    "id": 3,

    "name": "Clementine Bauch",

    "username": "Samantha",

    "email": "Nathan@yesenia.net",

    "address": {

        "street": "Douglas Extension",

        "suite": "Suite 847",

        "city": "McKenziehaven",

        "zipcode": "59590­4157",

        "geo": {

            "lat": "­68.6102",

            "lng": "­47.0653"

        }

    },

    "phone": "",

    "website": "ramiro.info",

    "company": {

        "name": "Romaguera­Jacobson",

        "catchPhrase": "Face to face bifurcated interface",

        "bs": "e­enable strategic applications"

    }

},

{

    "id": 4,

    "name": "Patricia Lebsack",

    "username": "Karianne",

    "email": "Julianne.OConner@kory.org",

    "address": {

        "street": "Hoeger Mall",

        "suite": "Apt. 692",

        "city": "South Elvis",

        "zipcode": "53919­4257",

        "geo": {

            "lat": "29.4572",

            "lng": "­164.2990"

        }

    },

    "phone": "493­170­9623 x156",

    "website": "kale.biz",

    "company": {

        "name": "Robel­Corkery",

        "catchPhrase": "Multi­tiered zero tolerance productivity",

        "bs": "transition cutting­edge web services"

    }

},

{

    "id": 5,

    "name": "Chelsey Dietrich",

    "username": "Kamren",

    "email": "Lucio_Hettinger@annie.ca",

    "address": {

        "street": "Skiles Walks",

        "suite": "Suite 351",

        "city": "Roscoeview",

        "zipcode": "33263",

        "geo": {

            "lat": "­31.8129",

            "lng": "62.5342"

        }

    },

    "phone": "(254)954­1289",

    "website": "demarco.info",

    "company": {

        "name": "Keebler LLC",

        "catchPhrase": "User­centric fault­tolerant solution",

        "bs": "revolutionize end­to­end systems"

    }

},

{

    "id": 6,

    "name": "Mrs. Dennis Schulist",

    "username": "Leopoldo_Corkery",

    "email": "Karley_Dach@jasper.info",

    "address": {

        "street": "Norberto Crossing",

        "suite": "Apt. 950",

        "city": "South Christy",

        "zipcode": "23505­1337",

        "geo": {

            "lat": "­71.4197",

            "lng": "71.7478"

        }

    },

    "phone": "",

    "website": "ola.org",

    "company": {

        "name": "Considine­Lockman",

        "catchPhrase": "Synchronised bottom­line interface",

        "bs": "e­enable innovative applications"

    }

},

{

    "id": 7,

    "name": "Kurtis Weissnat",

    "username": "Elwyn.Skiles",

    "email": "Telly.Hoeger@billy.biz",

    "address": {

        "street": "Rex Trail",

        "suite": "Suite 280",

        "city": "Howemouth",

        "zipcode": "58804­1099",

        "geo": {

            "lat": "24.8918",

            "lng": "21.8984"

        }

    },

    "phone": "210.067.6132",

    "website": "elvis.io",

    "company": {

        "name": "Johns Group",

        "catchPhrase": "Configurable multimedia task­force",

        "bs": "generate enterprise e­tailers"

    }

},

{

    "id": 8,

    "name": "Nicholas Runolfsdottir V",

    "username": "Maxime_Nienow",

    "email": "Sherwood@rosamond.me",

    "address": {

        "street": "Ellsworth Summit",

        "suite": "Suite 729",

        "city": "Aliyaview",

        "zipcode": "45169",

        "geo": {

            "lat": "­14.3990",

            "lng": "­120.7677"

        }

    },

    "phone": "586.493.6943 x140",

    "website": "jacynthe.com",

    "company": {

        "name": "Abernathy Group",

        "catchPhrase": "Implemented secondary concept",

        "bs": "e­enable extensible e­tailers"

    }

},

{

    "id": 9,

    "name": "Glenna Reichert",

    "username": "Delphine",

    "email": "Chaim_McDermott@dana.io",

    "address": {

        "street": "Dayna Park",

        "suite": "Suite 449",

        "city": "Bartholomebury",

        "zipcode": "76495­3109",

        "geo": {

            "lat": "24.6463",

            "lng": "­168.8889"

        }

    },

    "phone": "(775)976­6794 x41206",

    "website": "conrad.com",

    "company": {

        "name": "Yost and Sons",

        "catchPhrase": "Switchable contextually­based project",

        "bs": "aggregate real­time technologies"

    }

}

];

    return user;
  })

这是该控制器的视图，该视图使用ng-click单击以获取open（）。 

<md-scroll-shrink><header layout="row" layout-xs="column" class="header">
  <h3 class="text-center">User Directory</h3>
</header>
</md-scroll-shrink>




<div layout="row" layout-md="column">


    <div flex>
      <md-card id="card" ng-repeat="user in users">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">{{user.username}}</span>

            <span class="md-subhead">{{user.email}}</span>
          </md-card-title-text>
          <md-card-title-media>
          <span ngclass="glyphicon glyphicon-earphone"></span>
          </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
        <button  ng-click="open()" class="btn btn-success">More Info</button>
        </md-card-actions>
      </md-card>
      </div>




</div>

再次感谢您提供的任何帮助。

2 个解决方案

解决方案1
 0  2016-03-30 18:30:26

您不会在任何地方使用用户数据，因此不需要该解析代码。 通常，它会在您使用.when函数时进入内部。 

'use strict';

/**
 * @ngdoc overview
 * @name peapodTestApp
 * @description
 * # peapodTestApp
 *
 * Main module of the application.
 */
angular
    .module('peapodTestApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch'
    ])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl',
                controllerAs: 'main'
            })
            .when('/about', {
                templateUrl: 'views/about.html',
                controller: 'AboutCtrl',
                controllerAs: 'about'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

解决方案2
 0  2016-03-30 18:57:41

我之前也做过类似的工作。 您可以检查。 这可能会有所帮助。 

app.config(function ($routeProvider) {
$routeProvider
    .when('/landingpage', {
        templateUrl: 'app/views/landingPage.html',
        controller: 'landingCtrl'
    })
    .when('/home', {
        templateUrl: 'app/views/homePage.html',
        controller: 'homeCtrl',
        resolve: {
            app: function ($q, $location, $localStorage) {
                var defer = $q.defer();
                if ($localStorage.cbToken == undefined) {
                    $location.path('/landingpage');
                }
                defer.resolve();
                return defer.promise;
            }
        }

    })
    .otherwise({
        redirectTo: '/landingpage'
    });

}）

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用AJAX从数据库获取JSON数据时遇到问题 无法获取JSON数据 角度+图片上传。 无法将表格数据发送到后端 无法显示JSON数组数据 淘汰赛-无法访问嵌套的JSON数据 在HighCharts中绘制JSON数据时遇到问题 无法从服务器格式化此JSON数据 反应：无法呈现嵌套的 json 数据 我无法将JSON数据记录到控制台 从 json 过滤数据时遇到问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM