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
Post a Comment