Wie gruppiert man ein JavaScript-Objekt-Array nach mehreren Eigenschaften?

Question

Ich möchte umwandeln showtimesData zu showtimesByLocationByDate

Eine Idee, wie man es ohne Verwendung von Drittanbieter-Bibliothek und nur mit reinem Javascript tun? Welche Drittanbieter-Bibliothek kann ich sonst verwenden?

var showtimesData = [ 
     {"location":"location1", "date":"31-12-2016", "time":"1:00"}, 
     {"location":"location1", "date":"31-12-2016", "time":"2:00"}, 
     {"location":"location1", "date":"01-01-2017", "time":"3:00"}, 
     {"location":"location1", "date":"01-01-2017", "time":"4:00"}, 
     {"location":"location2", "date":"31-12-2016", "time":"1:00"}, 
     {"location":"location2", "date":"31-12-2016", "time":"2:00"}, 
     {"location":"location2", "date":"01-01-2017", "time":"3:00"}, 
     {"location":"location2", "date":"01-01-2017", "time":"4:00"}, 
    ]; 
    var showtimesByLocationByDate = [ 
     { 
      "location":"location1", 
      "dates":[ 
       { 
        "date":"31-12-2016", 
        "times":["1:00","2:00"] 
       }, 
       { 
        "date":"01-01-2017", 
        "times":["3:00","4:00"] 
       } 
      ] 
     }, 
     { 
      "location":"location2", 
      "dates":[ 
       { 
        "date":"31-12-2016", 
        "times":["1:00","2:00"] 
       }, 
       { 
        "date":"01-01-2017", 
        "times":["3:00","4:00"] 
       } 
      ] 
     }, 
    ]; 

Answer 1

Dieser Vorschlag bietet nur Array.prototype.reduce() mit einem temporären Objekt zur Referenzierung der Array-Elemente.

var showtimesData = [{ "location": "location1", "date": "31-12-2016", "time": "1:00" }, { "location": "location1", "date": "31-12-2016", "time": "2:00" }, { "location": "location1", "date": "01-01-2017", "time": "3:00" }, { "location": "location1", "date": "01-01-2017", "time": "4:00" }, { "location": "location2", "date": "31-12-2016", "time": "1:00" }, { "location": "location2", "date": "31-12-2016", "time": "2:00" }, { "location": "location2", "date": "01-01-2017", "time": "3:00" }, { "location": "location2", "date": "01-01-2017", "time": "4:00" }, ], 
 
    showtimesByLocationByDate = showtimesData.reduce(function (r, a) { 
 
     var o; 
 
     if (!(a.location in r.obj)) { 
 
      o = { location: a.location, dates: [] }; 
 
      r.obj[a.location] = { dates: o.dates }; 
 
      r.array.push(o); 
 
     } 
 
     if (!(a.date in r.obj[a.location])) { 
 
      o = { date: a.date, times: [] }; 
 
      r.obj[a.location].dates.push(o); 
 
      r.obj[a.location][a.date] = o.times; 
 
     } 
 
     r.obj[a.location][a.date].push(a.time); 
 
     return r; 
 
    }, { array: [], obj: {} }).array; 
 

 
document.write('<pre>' + JSON.stringify(showtimesByLocationByDate, 0, 4) + '</pre>');

Bonus: Allgemein Version mit einer bestimmten Datenstruktur

var showtimesData = [{ "location": "location1", "date": "31-12-2016", "time": "1:00" }, { "location": "location1", "date": "31-12-2016", "time": "2:00" }, { "location": "location1", "date": "01-01-2017", "time": "3:00" }, { "location": "location1", "date": "01-01-2017", "time": "4:00" }, { "location": "location2", "date": "31-12-2016", "time": "1:00" }, { "location": "location2", "date": "31-12-2016", "time": "2:00" }, { "location": "location2", "date": "01-01-2017", "time": "3:00" }, { "location": "location2", "date": "01-01-2017", "time": "4:00" }, ], 
 
    structure = [ 
 
     { key: 'location', data: 'dates' }, 
 
     { key: 'date', data: 'times' }, 
 
     { key: 'time' } 
 
    ], 
 
    showtimesByLocationByDate = showtimesData.reduce(function (r, a) { 
 
     var properties = structure.slice(), 
 
      lastKey = properties.pop().key; 
 

 
     properties.reduce(function (rr, b) { 
 
      var o = {}, 
 
       p = {}, 
 
       key = b.key, 
 
       value = a[key], 
 
       array = b.data; 
 

 
      if (!(value in rr.obj)) { 
 
       o[key] = value; 
 
       o[array] = []; 
 
       p[array] = o[array]; 
 
       rr.obj[value] = p; 
 
       rr.array.push(o); 
 
      } 
 
      return { array: rr.obj[value][array], obj: rr.obj[value] }; 
 
     }, r).array.push(a[lastKey]); 
 

 
     return r; 
 
    }, { array: [], obj: {} }).array; 
 

 
document.write('<pre>' + JSON.stringify(showtimesByLocationByDate, 0, 4) + '</pre>');

Answer 2

ich diese Transformation schlagen würde:

var showtimesData = [ 
 
     {"location":"location1", "date":"31-12-2016", "time":"1:00"}, 
 
     {"location":"location1", "date":"31-12-2016", "time":"2:00"}, 
 
     {"location":"location1", "date":"01-01-2017", "time":"3:00"}, 
 
     {"location":"location1", "date":"01-01-2017", "time":"4:00"}, 
 
     {"location":"location2", "date":"31-12-2016", "time":"1:00"}, 
 
     {"location":"location2", "date":"31-12-2016", "time":"2:00"}, 
 
     {"location":"location2", "date":"01-01-2017", "time":"3:00"}, 
 
     {"location":"location2", "date":"01-01-2017", "time":"4:00"}, 
 
    ]; 
 
    
 
var transformed = showtimesData.reduce(function(obj, show){ 
 
    //var { location, date, time } = show; //if destructuring is available 
 
    var location = show.location, 
 
     date = show.date, 
 
     time = show.time, 
 
     objLocation = obj[location] = obj[location] || { dates : { } }, 
 
     dates = objLocation.dates, 
 
     date = dates[date] = dates[date] || [ ]; 
 

 
     date.push(time); 
 
     return obj; 
 
}, {}); 
 
results.innerHTML = JSON.stringify(transformed, null, '\t');

<pre id="results"></pre>

Aber wenn Sie es wirklich zu, dass zu transformieren möchten, würde ich vorschlagen, diese Transformation grabing und wo es sich auf Ihre vorgeschlagenen Struktur überein.

var showtimesData = [ 
 
     {"location":"location1", "date":"31-12-2016", "time":"1:00"}, 
 
     {"location":"location1", "date":"31-12-2016", "time":"2:00"}, 
 
     {"location":"location1", "date":"01-01-2017", "time":"3:00"}, 
 
     {"location":"location1", "date":"01-01-2017", "time":"4:00"}, 
 
     {"location":"location2", "date":"31-12-2016", "time":"1:00"}, 
 
     {"location":"location2", "date":"31-12-2016", "time":"2:00"}, 
 
     {"location":"location2", "date":"01-01-2017", "time":"3:00"}, 
 
     {"location":"location2", "date":"01-01-2017", "time":"4:00"}, 
 
    ]; 
 
    
 
var transformed = showtimesData.reduce(function(obj, show){ 
 
    //var { location, date, time } = show; //if destructuring is available 
 
    var location = show.location, 
 
     date = show.date, 
 
     time = show.time, 
 
     objLocation = obj[location] = obj[location] || { dates : { } }, 
 
     dates = objLocation.dates, 
 
     date = dates[date] = dates[date] || [ ]; 
 

 
     date.push(time); 
 
     return obj; 
 
}, {}); 
 

 
var secondTransformed = Object.keys(transformed).map(function(key){ 
 
    var dates = transformed[key].dates, 
 
     transformedDates = Object.keys(dates).map(function(key){ 
 
      return { date : key, times : dates[key] } 
 
     }); 
 
    return { location : key, dates : transformedDates } 
 
}); 
 
results.innerHTML = JSON.stringify(secondTransformed, null, '\t');

<pre id="results"></pre>

Zwar gibt es bessere Möglichkeiten, diese (Leistung klug) zu tun.