angularjs将json数组拆分为不同的数组

时间：2016-11-17 15:47:51

标签： javascript angularjs arrays json

在我的应用程序中使用http.post来获取已在服务器上从多个阵列形成的json数组。 现在我的问题是我应该将这个数组分成四个独立的数组，我将解释： 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"}]

现在从这个数组我应该创建4个数组，第一个数据将存储几天，例如（17.11.2016,11.18.2016,21.11.2016），第二个数据将存储所有时间“属于“第一天例如（09：45,16：50），第三天将所有”归属“时间存储到第二天，例如，（11：25,12：30）和第四天其中将存储“属于”第三天的所有时间，例如（16：10,17：25）。

所以结果将是这样的：

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)

谁能给我一个指导或一些建议？

谢谢

更新： 这是我的控制器，我在那里检索JSON数组：

.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;
        });
    };
});

我应该选择这些选项：17.11.2016,11.18.2016,21.11.2016

选择我应该有这些选项：09：45,16：50如果我选择第一天

6 个答案:

答案 0 :(得分：1)

问题：如何在我的控制器中为我的数组（$ scope.response）插入此函数？

要转换收到的回复，您应该将传递给 $ http 请求的配置对象的 transformResponse 属性设置为功能，它将根据您的需要转换传入的数据。有关详细信息，请参阅transforming-requests-and-responses。

我强烈建议您将从服务器获取数据的代码移至服务，而不是将其写入控制器本身，此服务将作为媒介对服务器进行GET，POST等请求，控制器的工作是进行数据绑定，用户交互和数据绑定。前端逻辑。有关详细信息以及以下代码段中使用的编码样式，请参阅this。

here是以下代码段的Plunker链接。

Angular代码。

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 = [];
          for (var i = 0; i < 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"
  }]

观点。

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div class="form-group">
      <label>Event Date</label>
      <select ng-options="event as event.date for 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 as schedule.time for 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>

注意：如果您不想创建数据服务，那么您可以根据需要在控制器中放置转换源数据的函数，并在$ http请求中调用它。成功回调。

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

    function processItems(events) {
        ...
    }
};

答案 1 :(得分：0)

我建议你使用MomentJS库来处理日期。

然后，在你的数组上循环，阅读Day属性，进行计算（使用MomentJS，你有一些好的和易于使用的函数来知道它是否是当天，过去等等。 ）并将其添加到正确的数组中。

在此示例中，您从服务器收到的数组存储在变量data。

中 
var firstArray = [], 
  secondArray = [], 
  thirdArray = [], 
  fourthArray = [];

data.forEach(function(entry) {
  var day = moment(entry.Day, "MM/DD/YYYY");
  /* your computation here to know in which array it'll go */
})

答案 2 :(得分：0)

首先，数组格式不正确:)我做了一些小改动：

var arr = [
    { "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"}
]

我在之后宣布，2个数组：

var First = [];
var Second = [];

最后我在新阵列中推送了我想要的东西：

arr.forEach(function(item){
    First.push(item.Day);
    Second.push(item.time);
})

答案 3 :(得分：0)

使用Array.prototype.reduce创建一个对象，day为键，times为值数组，并获取所需的数组从那 - 见下面的演示：

＆＃13;
＆＃13; 
var array=[{"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"}];

var result = array.reduce(function(prev,curr){
  prev[curr.Day] = prev[curr.Day] || [];
  prev[curr.Day].push(curr.time);
  return prev;
},{});

// list of days
console.log("Days: ", Object.keys(result));

// get times for each day by using date as a key
for(var key in result) {
  console.log(key + " => " + result[key]);
}
＆＃13; 
.as-console-wrapper{top:0;max-height:100%!important;}
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

这是我的建议，使用Lodash进行简化，尽管只能用JS来完成。

另外，请注意日期格式不一致，所以我尝试使用DD / MM / YYYY格式来理解它。

var arr = [
        { "Day": "17/11/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": "21/11/2016", "time": "16:10"},
        { "Day": "21/11/2016", "time": "17:25"}
    ];
    
// Group the times by the date
var grouped = _(arr)
.groupBy('Day')
.mapValues(v => _.map(v, 'time'))
.mapKeys((v, k) => moment(k, 'DD/MM/YYYY').format('DD.MM.YYYY'))
.value();

// Massage the grouped times
var result = [_.keys(grouped)];
result.push.apply(result, _.values(grouped));

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>

答案 5 :(得分：0)

您可以创建两个数组，一个用于日期列表，另一个用于时序列表，作为您从服务器获取的源数组中两个<select>元素的数据源，您需要一个该属性将有助于识别日期和时间数组的关系，即日期属性。

请检查以下代码段，使用日期属性filter: { date: ctrl.event.date}过滤时间下拉列表，我希望它对您有所帮助。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  var events = [{
    "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"
  }];

  vm.data = processItems(events);

  function processItems(events) {
    var result = {
      events: [],
      schedules: []
    };

    var dates = [];
    for (var i = 0; i < 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;
  }
}
.form-group {
  margin: 10px;
}
.form-group * {
  width: 100px;
}
.form-group label {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div class="form-group">
      <label>Event Date</label>
      <select ng-options="event as event.date for 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 as schedule.time for 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>

如果您可以控制服务器代码，我建议您获得响应JSON，如下所示。

var data = {
  events: [
    { eventId: 1, eventDate: '11/17/2016' },
    { eventId: 2, eventDate: '12/18/2016' },
    { eventId: 3, eventDate: '12/21/2016' }
  ],
  timings: [{
    { eventId: 1, eventTime: '10:00' },
    { eventId: 1, eventTime: '12:30' },
    { eventId: 2, eventTime: '16:50' },
    { eventId: 3, eventTime: '17:50' }
  }]
};

虽然您可以使用下拉列表中的源阵列，如下所示，例如：我不建议这样做，因为随着时间的推移，当事情开始变得复杂或系统发生变化时，很难维持。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .filter('unique', unique);

function DefaultController() {
  var vm = this;
  vm.events = [{
    "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"
  }];
}

function unique() {
  return function(input, key) {
    var unique = {};
    var uniqueList = [];
    for (var i = 0; i < input.length; i++) {
      if (typeof unique[input[i][key]] == "undefined") {
        unique[input[i][key]] = "";
        uniqueList.push(input[i]);
      }
    }
    return uniqueList;
  };
}
.form-group {
  margin: 10px;
}
.form-group * {
  width: 100px;
}
.form-group label {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div class="form-group">
      <label>Event Date</label>
      <select ng-options="event as event.day for event in ctrl.events | unique: 'day'" ng-model="ctrl.event">
        <option value="">Select</option>
      </select>
    </div>
    <div class="form-group">
      <label>Event Time</label>
      <select ng-options="schedule as schedule.time for schedule in ctrl.events | filter: { day: ctrl.event.day}" ng-model="ctrl.schedule" ng-disabled="!ctrl.event">
        <option value="">Select</option>
      </select>
    </div>
  </div>
</div>

相关问题
最新问题