javascript - angularjs split json array into different arrays -


in app using http.post json array has been formed, on server, multiple arrays. problem should split array 4 separate arrays, i'll explain: json array example:

[{"day", "11/17/2016", "time": "09:45"}, { "day", "17/11/2016", "time": "16:50"}, (.....) { "day", "18/11/2016", "time": "11:25"}, { "day", "18/11/2016", "time": "12:30"}, (.....) { "day", "11/21/2016", "time": "16:10"}, { "day", "11/21/2016", "time": "17:25"}] 

now array should create 4 array, first in stored several days, example (17.11.2016, 11.18.2016, 21.11.2016), second in times stored " belonging "to first day example (09:45, 16:50), third in stored all" belonging "times second day, example, (11:25, 12:30) , fourth in stored times "belonging" third day, example (16:10, 17:25).

so result this:

result:

first array: (17.11.2016, 11.18.2016, 21.11.2016) second array: (09:45, 16:50) third array: (11:25, 12:30) fourth array: (16:10, 17:25) 

who can give me hand or advice?

thank you

update: controller retreive json array:

.controller('appctrl', function($scope, $http) {     $scope.data = {};      $scope.submit = function(){         var link = 'http://localhost/shuttlefix/api.php';         $scope.var = "prova";         $http.post(link, {username : $scope.data.username}).then(function (res){             $scope.response = res.data;         });     }; }); 

and should have select these options: 17.11.2016, 11.18.2016, 21.11.2016

and select should have these options: 09:45, 16:50 if choice first day

question: how can insert function array ($scope.response) in controller?

to transform incoming response should set transformresponse property of configuration object passed $http request function transform incoming data per needs. see transforming-requests-and-responses more information.

i recommend move code gets data server service instead of writing in controller itself, service act medium get, post, etc requests server , controller's job data binding, user-interaction & front-end logic. see this more information , coding style used in below code snippet.

here plunker link below code snippet.

the angular code.

angular   .module('demo', [])   .controller('defaultcontroller', defaultcontroller)   .factory('dataservice', dataservice);  defaultcontroller.$inject = ['dataservice'];  function defaultcontroller(dataservice) {   var vm = this;    getevents();    function getevents() {     return dataservice.getevents()       .then(function (data) {         vm.data = data;         return vm.data;       });   } }  dataservice.$inject = ['$http'];  function dataservice($http) {   var service = {     getevents: getevents   };    return service;    function getevents() {     var config = {       transformresponse: function (data, headers) {         if(headers("content-type") === "application/json; charset=utf-8" && angular.isstring(data)) {           var result = {             events: [],             schedules: []           };            var events = json.parse(data);           var dates = [];           (var = 0; < events.length; i++) {             if (dates.indexof(events[i].day) === -1) {               var date = events[i].day;               dates.push(date);               result.events.push({                 date: date               });             }              result.schedules.push({               date: events[i].day,               time: events[i].time             });           }            return result;         } else {           return data;         }       }     };      return $http.get('events.json', config)       .then(geteventscompleted)       .catch(geteventsfailed);      function geteventscompleted(response) {       return response.data;     }      function geteventsfailed(error) {       console.error(error);     }   } } 

events.json

[{     "day": "11/17/2016",     "time": "09:45"   }, {     "day": "17/11/2016",     "time": "16:50"   }, {     "day": "18/11/2016",     "time": "11:25"   }, {     "day": "18/11/2016",     "time": "12:30"   }, {     "day": "11/21/2016",     "time": "16:10"   }, {     "day": "11/21/2016",     "time": "17:25"   }] 

the view.

<div ng-app="demo">   <div ng-controller="defaultcontroller ctrl">     <div class="form-group">       <label>event date</label>       <select ng-options="event event.date event in ctrl.data.events" ng-model="ctrl.event">         <option value="">select</option>       </select>     </div>     <div class="form-group">       <label>event time</label>       <select ng-options="schedule schedule.time schedule in ctrl.data.schedules | filter: { date: ctrl.event.date}" ng-model="ctrl.schedule" ng-disabled="!ctrl.event">         <option value="">select</option>       </select>     </div>   </div> </div> 

note: if don't want create data service can put function transforms source data per needs, in controller , invoke in $http request's success callback.

$scope.submit = function() {     ...     $http.post(link, { username : $scope.data.username }).then(function (response) {         $scope.response = processitems(response.data);     });      function processitems(events) {         ...     } }; 

Comments

Popular posts from this blog

account - Script error login visual studio DefaultLogin_PCore.js -

xcode - CocoaPod Storyboard error: -