Menu
I have a array of objects for use in D3 e.g
var cities = [
{ city: "London", country: "United Kingdom", index: 280 },
{ city: "Geneva", country: "Switzerland", index: 259 },
{ city: "New York City", country: "United States", index: 237 },
{ city: "Singapore", country: "Singapore", index: 228 },
{ city: "Paris", country: "France", index: 219 },
{ city: "San Francisco", country: "United States", index: 218 },
{ city: "Copenhagen", country: "Denmark", index: 217 },
{ city: "Sydney", country: "Australia", index: 215 },
{ city: "Hong Kong", country: "Hong Kong", index: 214 },
{ city: "Brisbane", country: "Australia", index: 208 }
}
I would like to order the objects in ascending order based on their cities.index property. So that I can display them as such in D3.js. Im sure there is a way of doing this in D3 but I am yet to figure it out when dealing with an array of objects.
Any help?
341
Example 1: Sort Array by Property NameThe sort() method sorts its elements according to the values returned by a custom sort function ( compareName in this case). Here, The property names are changed to uppercase using the toUpperCase() method. If comparing two names results in 1, then their order is changed.
In JavaScript, we use the sort() function to sort an array of objects. The sort() function is used to sort the elements of an array alphabetically and not numerically. To get the items in reverse order, we may use the reverse() method.
To sort an array of objects, you use the sort() method and provide a comparison function that determines the order of objects.
No, it is not possible to sort an object. Objects are always unsorted. You might be better off having each row be an object entry in an array ; you could then sort the array by the customer name. You cannot rely on the iteration order of an object in JavaScript.
You can pass an anonymous function to the Javascript Array.prototype.sort to sort by index. D3 has a function d3.ascending (v 3.x) that makes it easy to sort ascending:
cities.sort(function(x, y){
return d3.ascending(x.index, y.index);
})
And here's the output:
[
{"city":"Brisbane","country":"Australia","index":208},
{"city":"Hong Kong","country":"Hong Kong","index":214},
{"city":"Sydney","country":"Australia","index":215},
{"city":"Copenhagen","country":"Denmark","index":217},
{"city":"San Francisco","country":"United States","index":218},
{"city":"Paris","country":"France","index":219},
{"city":"Singapore","country":"Singapore","index":228},
{"city":"New York City","country":"United States","index":237},
{"city":"Geneva","country":"Switzerland","index":259},
{"city":"London","country":"United Kingdom","index":280}
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
