如何过滤对象数组？

Question

I have an array of objects that have been pulled from a web service that look something like this.

{ 
  ArticleID: "ABC123", 
  Region: "US", 
  PubTypeID: "EO", 
  PubType: "Europe Order", 
  Created: "01/01/2013", 
  Scheduled: "03/02/2013"
} 

The ArticleID, Region & PubTypeID make up a composite key. The datasource is one table and cannot be changed but I need to get Unique items to display a dashboard like interface. So Show Unique ArticleID's but group the articles under them. The interface should look something like this.

ArticleID      Status
----------------------
ABC123          Scheduled
    Region:US       Scheduled: 02/02/2013
    Region:JP       Scheduled: 05/02/2013
    Region:OE       Scheduled: 03/02/2013
    Region:EU       Scheduled: 04/02/2013
ABC456          Ready to Schedule          
    Region:US       
    Region:US       
    Region:US       
ABC789          Sent
    Region:EU       Sent On: 01/02/2013
    Region:EU       Sent On: 01/02/2013
    Region:EU       Sent On: 01/02/2013
    Region:EU       Sent On: 01/02/2013

The status is determined by the date. I also have the dilema of what the status will be if one item under an article has a date and one does not, what will the status be?

If the data was normalized I would have no issues here as I could do multiple selects and build the output but I only have a flat result set so need to do the "selecting" in Javascript.

Can someone help me on how I would do this in Javascript please?

Answer 1

In order to build this data out to go into a table as you describe, I would first organize the data so it matches what you want to do. So instead of having individual objects, I would iterate through the returned data and convert it into:

{ArticleID: "ABC123", 
Status: "Scheduled", 
Articles: { 
  ArticleID: "ABC123", 
  Region: US, 
  PubTypeID: "EO", 
  PubType: "Europe Order", 
  Created: "01/01/2013", 
  Scheduled: "03/02/2013"
  },{ 
  ArticleID: "ABC234", 
  Region: US, 
  PubTypeID: "EO", 
  PubType: "Europe Order", 
  Created: "01/01/2013", 
  Scheduled: "03/02/2013"
  }
}

Then build the table based on this structure. You will need to have some calculations in your function to determine the status. I don't understand this one enough to give you a specific answer, but it looks like all common article ID's have the same status, so this could be ignored while restructuring the objects, and inserted while building the table.

If you have any control over the server side code, it would be much better to do this object restructure work before passing it to the client.

Answer 2

You could use Array.prototype.filter , to sort all entries, given the fact you know all the article IDs (If not, you would have to iterate over the input and collect them).

var input = [{ 
  ArticleID: "ABC123", 
  Region: "US"
},{ 
  ArticleID: "ABC456", 
  Region: "US"
}];

var regions = ["ABC123","ABC456"];

var articles = [];
regions.forEach(
    function(reg,i){
        articles[i] = input.filter( function(el){ return el.ArticleID == reg} );
    }
);

console.log(regions);
//regions[0] <= array with all articles with regionID "ABC123"
//regions[1] <=                   - " -               "ABC456"

now articles holds an array with all articles sorted by ArticleID.

Beware, this is IE9+ code, in order to make it work in IE8 and below, you need a shim for filter and forEach which you can find on the according MDN-Articles.

Answer 3

I think that you need to re-arrange the data having it ordered by ArticleID. And assuming you are going to have many articles. Something like this iteration could do the re-arranging task. Then you can easily iterate trough the new object printing the useful information

var x
var y = 0;
var newArray = new Array();
for(key in data){
   x = data[key].articleID; //The value of the key you want to use (ArticleID)
   newArray[x] = newArray[x] || []
   newArray[x][y] = data[key];
   y++
}
console.log(newArray)

Here you have a fiddle. Look into the resulting object (using the chrome or other console), and you are going to see how the data is now grouped by ArticleID;

EDIT: I've replaced the code with a cleaner version.