在ngrepeat中使用JSON返回

时间:2015-09-02 11:58:23

标签: json angularjs

我得到了一个json返回但由于某种原因我无法在我的重复中使用它,我可以返回对象raw并显示它,只是不确定如何设置它来正确解析

这是我得到的json

{"COLUMNS":["SUCCESS","RETMESSAGE","EVENTID","EVENTTYPEID","EVENTNAME","EVENTDESC","STARTDATE","ENDDATE","CITY","STATE","COUNTRY","VENUE","EVENTWEBSITE","HOTELWEBSITE","CREATEDDATE","UPDATEDDATE","ISDELETED","DELETEDDATE","FEATURED","TYPENAME","EVENTIMAGEID","LOGOFILETYPE","IMAGECOUNT"],"DATA":[[true,"All Events Found!",7,5,"Europa Test Games 2015","","July, 17 2015 00:00:00","July, 19 2015 00:00:00","","0","USA","","","","July, 15 2015 09:50:12","July, 24 2015 11:05:48",false,null,false,"Testing Event Type",19,"jpg",10],[true,"All Events Found!",8,6,"Test1","","January, 01 1900 00:00:00","January, 01 1900 00:00:00","","0","USA","","","","July, 15 2015 10:31:16","July, 15 2015 10:31:16",false,null,false,"Event 2",null,null,3],[true,"All Events Found!",10,9,"Test3","","January, 01 1900 00:00:00","January, 01 1900 00:00:00","","0","USA","","","","July, 15 2015 10:33:42","July, 15 2015 10:33:42",false,null,false,"New Type ",null,null,1],[true,"All Events Found!",11,7,"Test4","","January, 01 1900 00:00:00","January, 01 1900 00:00:00","","0","USA","","","","July, 15 2015 10:34:55","July, 15 2015 10:34:55",false,null,false,"Event one",null,null,0],[true,"All Events Found!",13,8,"Test6","","January, 01 1900 00:00:00","January, 01 1900 00:00:00","","0","USA","","","","July, 15 2015 10:36:59","July, 15 2015 10:36:59",false,null,false,"Test",21,"png",0],[true,"All Events Found!",14,8,"Tulip Event","","July, 31 2015 00:00:00","August, 01 2015 00:00:00","","0","USA","","","","July, 15 2015 10:44:04","July, 15 2015 10:44:04",false,null,false,"Test",25,"jpg",0],[true,"All Events Found!",16,7,"Google Chrome","This is a test in Google Chrome ","July, 15 2015 00:00:00","August, 01 2015 00:00:00","Here","WA","USA","My Place","","","July, 15 2015 11:06:52","July, 15 2015 11:06:52",false,null,false,"Event one",27,"jpg",0],[true,"All Events Found!",17,7,"Add an Image","Add an Image Test ","January, 01 1900 00:00:00","January, 01 1900 00:00:00","","CA","USA","","","","July, 15 2015 11:08:45","July, 15 2015 11:08:45",false,null,false,"Event one",28,"png",2],[true,"All Events Found!",18,1,"Missing Data Test","This is a test for missing data after an add. Added new comment for update purposes","January, 01 1900 00:00:00","January, 01 1900 00:00:00","Area","ID","USA","My Place","esc.dev.europa-sports.net","esc.dev.europa-sports.net","July, 15 2015 11:24:11","August, 06 2015 11:49:32",false,null,true,"Top Industry Events",75,"tmp",0],[true,"All Events Found!",19,5,"event namer","tester","January, 01 1900 00:00:00","January, 01 1900 00:00:00","city","NE","USA","venue","","","July, 15 2015 11:46:17","July, 15 2015 11:46:43",false,null,false,"Testing Event Type",32,"jpg",0],[true,"All Events Found!",21,6,"Name Change","e","May, 01 2015 00:00:00","June, 01 2015 00:00:00","e","WA","USA","e","","","July, 15 2015 12:46:29","July, 15 2015 13:56:05",false,null,false,"Event 2",37,"jpg",1],[true,"All Events Found!",22,5,"IE TEST","IE TEST ADD COMMENT","January, 01 2015 00:00:00","January, 06 2015 00:00:00","NOT HERE","NE","USA","ANYWHERE","MYSPACE.COM","","July, 15 2015 13:44:44","July, 15 2015 13:48:27",false,null,false,"Testing Event Type",39,"jpg",1],[true,"All Events Found!",24,6,"event me now! ","BOOM! ","December, 03 2015 00:00:00","December, 05 2015 00:00:00","Your town","AK","USA","My house","not here","","July, 16 2015 08:33:27","July, 16 2015 08:33:27",false,null,false,"Event 2",null,null,0],[true,"All Events Found!",25,5,"event me now!!","BAM! ","December, 03 2015 00:00:00","December, 05 2015 00:00:00","Your town","AZ","USA","My Place","","","July, 16 2015 08:35:08","July, 16 2015 08:35:08",false,null,false,"Testing Event Type",null,null,0],[true,"All Events Found!",26,5,"KJLFDSJKLFDKJL","BAM","December, 03 2015 00:00:00","December, 05 2015 00:00:00","Your town","AL","USA","My House","","","July, 16 2015 08:35:52","July, 16 2015 08:35:52",false,null,false,"Testing Event Type",null,null,0],[true,"All Events Found!",27,6,"FDSJKLSDFSFDJKL","BAM","December, 03 2015 00:00:00","December, 05 2015 00:00:00","Your town","AZ","USA","My Place","","","July, 16 2015 08:38:35","July, 16 2015 08:38:35",false,null,false,"Event 2",null,null,0],[true,"All Events Found!",29,6,"cvxbvcbvcbcv","dfvdfvdf","December, 03 2015 00:00:00","December, 05 2015 00:00:00","My town","AZ","USA","My Place","","","July, 16 2015 09:19:38","July, 16 2015 09:22:13",false,null,false,"Event 2",44,"jpg",0],[true,"All Events Found!",30,14,"fvsbzdfb sdf","","December, 13 2015 00:00:00","December, 15 2015 00:00:00","","0","USA","","","","July, 16 2015 09:23:03","July, 16 2015 09:23:03",false,null,false,"CREATE EVENT TYPE",45,"jpg",0],[true,"All Events Found!",31,5,"EVENT NAMEY","BAM","December, 03 2015 00:00:00","December, 05 2015 00:00:00","Your town","AZ","USA","My Place","HERE","","July, 16 2015 10:00:58","July, 16 2015 10:01:51",false,null,false,"Testing Event Type",46,"jpg",2],[true,"All Events Found!",32,6,"event me now!!!!","HTR","December, 03 2015 00:00:00","December, 05 2015 00:00:00","Your town","AZ","USA","My Place","","","July, 16 2015 10:06:49","July, 16 2015 10:19:51",false,null,false,"Event 2",49,"jpg",1],[true,"All Events Found!",33,1,"This is a test event","","October, 01 2015 00:00:00","October, 03 2015 00:00:00","","0","USA","","","","July, 23 2015 15:13:00","July, 24 2015 11:23:10",false,null,true,"Top Industry Events",52,"png",1],[true,"All Events Found!",34,6,"RYAN","RYAN RETEST ON DEV","December, 05 2016 00:00:00","December, 06 2016 00:00:00","YES","AK","USA","YES","","","July, 24 2015 11:21:55","July, 24 2015 11:22:50",false,null,true,"Event 2",54,"jpg",0],[true,"All Events Found!",35,6,"JKLDFSJKLFSD","FKLGFKJGFKJ","September, 25 2017 00:00:00","September, 30 2017 00:00:00","KJFDJK","AZ","USA","JKSDFJK","","","July, 24 2015 11:23:52","July, 24 2015 11:23:52",false,null,true,"Event 2",55,"jpg",0],[true,"All Events Found!",41,1,"Chris' Big Test Event",null,"August, 05 2015 00:00:00","August, 05 2015 00:00:00",null,null,"USA",null,null,null,"August, 05 2015 14:14:58","August, 05 2015 15:13:24",false,null,false,"Top Industry Events",null,null,0],[true,"All Events Found!",42,1,"Missing Data Test 123","This is a test for missing data after an add. Added new comment for update purposes","January, 01 1900 00:00:00","January, 01 1900 00:00:00","Area","ID","USA","My Place","esc.dev.europa-sports.net","esc.dev.europa-sports.net","August, 05 2015 17:41:42","August, 05 2015 17:41:42",false,null,false,"Top Industry Events",null,null,0],[true,"All Events Found!",43,1,"Missing Data Test 1234","This is a test for missing data after an add. Added new comment for update purposes","January, 01 1900 00:00:00","January, 01 1900 00:00:00","Area","ID","USA","My Place","esc.dev.europa-sports.net","esc.dev.europa-sports.net","August, 05 2015 18:06:49","August, 05 2015 18:06:49",false,null,false,"Top Industry Events",null,null,0],[true,"All Events Found!",44,1,"Missing Data Test 1235","This is a test for missing data after an add. Added new comment for update purposes","January, 01 1900 00:00:00","January, 01 1900 00:00:00","Area","ID","USA","My Place","esc.dev.europa-sports.net","esc.dev.europa-sports.net","August, 05 2015 18:07:44","August, 05 2015 18:07:44",false,null,false,"Top Industry Events",null,null,0],[true,"All Events Found!",45,1,"Missing Data Test 12355","This is a test for missing data after an add. Added new comment for update purposes","January, 01 1900 00:00:00","January, 01 1900 00:00:00","Area","ID","USA","My Place","esc.dev.europa-sports.net","esc.dev.europa-sports.net","August, 05 2015 18:08:41","August, 05 2015 18:08:41",false,null,false,"Top Industry Events",null,null,0]]}

这是我的代码

//工厂

'use strict';


angular.module('myApp.module.Events.eventsMain.Factory', [])// jshint ignore:line

.factory('EventFactory',// jshint ignore:line
    ['$rootScope','$http',
    function ($rootScope,$http) {
        var service = {};
            $rootScope.serviceMessage = 'This is the about page message from the controller';

            service.listEvents = function (callbackFunc) {

               $http({
                        method: 'GET',
                        url: '/mercury/events/listall.json'
                     }).success(function(data){
                        // With the data succesfully returned, call our callback
                        callbackFunc(data);
                    }).error(function(){
                        alert("error");
                    });
            };


         return service;
    }]);

//控制器

'use strict';


angular.module('myApp.module.Events.eventsMain.Controller', ['ngRoute','myApp.module.Events.eventsMain.Factory'])// jshint ignore:line


.config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/events-main', {
            controller: 'EventController',
            templateUrl: 'com/modules/Events/events-main/views/events-main.html',
            hideMenus: true,
            protectedArea: true,
            title: 'Events Main',
            menuGroup: 'Events',
            description: 'This is the Description of the Events page',
            keywords: 'Events, Events Page',
            breadcrumbList: [{view: '/',title:'Home'},{view: '/events-main', title: 'Events Main'}]
      });
    }])


.controller('EventController',// jshint ignore:line
    ['$scope', 'EventFactory',
    function ($scope, EventFactory) {
        //List of functions that Event uses 

        //This function returns the data from the events service and assigns them to an eventList
        //This variable is what is used for the pagination
        EventFactory.listEvents(function(dataResponse) {
            $scope.dataList = dataResponse;
        });

        //This is the general service message to demo setting a variable and displaying it on the page 
        $scope.message = 'This is the Events page message from the controller';
        //This resets the currentPage on pagination on the events page so every time you go to it , it will reset it to the first page
        $scope.curPage = 0;
        //This sets the number of items that are shown on the page for pagination
        $scope.pageSize = 8;        
    }]);

如果我{{dataList}}它将返回它并将其转储到页面上但我似乎无法将它用于我的分页或我的ngRepeat,我是否需要序列化它?或者我错过了什么

这是ngrepeat

<div class="container">
    <div class="row text-center">
        <div class="col-sm-3 col-md-3 col-lg-3 col-xs-6" data-ng-repeat="data in dataList | filter: searchEventText | orderBy: filterEventText | pagination: curPage * pageSize | limitTo: pageSize">
            <div class="thumbnail"><img src="{{ data.pic }}" alt="{{ data.eventname }}" class="img-responsive">
            <div class="caption">
                <h4>{{ data.eventname }}</h4>
                <h5>{{ data.startdate }}</h5>
                <h6>{{ data.eventdesc }}</h6>
                <p><a href="/event-details" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Details </a>
                </p>
            </div>
            </div>
        </div>
    </div><!--Row-->
</div><!--Container-->

1 个答案:

答案 0 :(得分:0)

问题是在需要更改为

的功能中显示访问它的信息
EventFactory.listEvents(function(dataResponse) {
            $scope.dataList = dataResponse.data;
        });

并显示它是有趣的部分,因为无法访问对象中的列,您必须以类似于此的数组访问它们

<div class="container">
    <div class="row text-center">
        <div class="col-sm-3 col-md-3 col-lg-3 col-xs-6" data-ng-repeat="data in dataList | filter: searchEventText | orderBy: filterEventText | pagination: curPage * pageSize | limitTo: pageSize">
            <div class="thumbnail"><img src="{{ data[3] }}" alt="{{ data.eventname }}" class="img-responsive">
            <div class="caption">
                <h4>{{ data[0] }}</h4>
                <h5>{{ data[1] }}</h5>
                <h6>{{ data[2] }}</h6>
                <p><a href="/event-details" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Details </a>
                </p>
            </div>
            </div>
        </div>
    </div><!--Row-->
</div><!--Container-->