2016-06-28 5 views
0

私はイベントとして知られているjsonオブジェクトの配列を持っています。これには、eventId、eventName、最も重要なdateofeventのようなフィールドがあります。このJSONをフィルタリングして構造化するにはどうすればよいですか?

[{event1}、{event2}、{event3}];

このイベントの配列を反復処理して、同じ日のイベントをフィルタリングする必要があります。このような新しいオブジェクトを取得する。

"days": [ 
    { 
     "date": "11-05-2015", 
     "events": [ 
      {"eventId": 1, ...}, 
      {"eventId": 2, ...}, 
      {"eventId": 3, ...}, 
      {"eventId": 4, ...}, 
     ] 
    }, 

これをJavascriptまたはAngularで効率的に行うにはどうすればよいですか?

+0

最初のものが最初です.Javascriptは言語です。 AngularはJavascriptフレームワークです。あなたはあなたが求めているものを達成するためにAngularを必要としません。第2に、これはhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filterに役立つはずです –

+0

[Javascript:属性に基づいてオブジェクト配列をフィルタリングする方法]の可能な複製http://stackoverflow.com/questions/2722159/javascript-how-to-filter-object-array-based-on-attributes) –

答えて

0

日付をキーとして新しいオブジェクトを作成できます。値はイベントを含む配列です。 date => eventsマップを取得したら、必要な構造で配列に変換します。

元のデータが "イベント" と呼ばれる変数であると仮定すると:

var events = [{event 1}, {event 2}...]; 
    var daysMap = {}; 
    var days = []; 
    events.map(function(event) { 
     if (days[event.dateofevent] === undefined) { 
      days[event.dateofevent] = []; 
     } 
     days[event.dateofevent].push(event); 
    }); 
    for (var day in daysMap) { 
     days.push({ 
      date: day, 
      events: daysMap[day] 
     }); 
    } 
+0

答えをありがとう! –

-1

HTML

<div ng-app> 
    <span class="bold">Demonstrating filtering and sorting using Angular JS</span> 
    <br /><br /> 
     <div ng-controller="ShoppingCartCtrl">   
      <div>Sort by: 
      <select ng-model="sortExpression"> 
        <option value="Name">Name</option> 
        <option value="Price">Price</option> 
        <option value="Quantity">Quantity</option> 
       </select> 
      </div> 
      <br /> 
      <div><strong>Filter Results</strong></div> 
      <table> 
       <tr> 
        <td>By Any: </td> 
        <td><input type="text" ng-model="search.$" /></td> 
       </tr> 
       <tr> 
        <td>By Name: </td> 
        <td><input type="text" ng-model="search.Name" /></td> 
       </tr> 
       <tr> 
        <td>By Price: </td> 
        <td><input type="text" ng-model="search.Price" /></td> 
       </tr> 
       <tr> 
        <td>By Quantity: </td> 
        <td><input type="text" ng-model="search.Quantity" /></td> 
       </tr> 
      </table> 
      <br /> 
      <table border="1"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Price</th> 
         <th>Quantity</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="item in items | orderBy:mySortFunction | filter:search"> 
         <td>{{item.Name}}</td> 
         <td>{{item.Price | currency}}</td> 
         <td>{{item.Quantity}}</td> 
        </tr> 
       </tbody> 
      </table> 
      <br /> 
</div> 
</div> 

Javascriptを

function ShoppingCartCtrl($scope) { 

     $scope.items = [ 
      {Name: "Soap", Price: "25", Quantity: "10"}, 
      {Name: "Shaving cream", Price: "50", Quantity: "15"}, 
      {Name: "Shampoo", Price: "100", Quantity: "5"} 
     ]; 

     $scope.mySortFunction = function(item) { 
      if(isNaN(item[$scope.sortExpression])) 
       return item[$scope.sortExpression]; 
      return parseInt(item[$scope.sortExpression]); 
     } 
} 

CSS

.bold { font-weight:bold; } 

table td{ 
    padding: 10px; 
} 

table th{ 
    font-weight: bold; 
    text-align: center; 
} 

demo_click here

+0

何ですか?間違った質問にあなたが答えたと思います... –

関連する問題