re-order array based on json data

Question

This question is unique in that it requests a lookup to a json object and is not a simple array sort. I want to populate 4 input fields with the contents of splitString array. But I need to re-order the splitString array in descending (rsort) of the members[Rating]. members has 300+ entries, so it's counterproductive and unnecessary to sort it.

How can I do this? The code is my start...

HTML:

<button onclick="ratingSort()" title="Rating sort" tabindex="-1">
<img src="images/sort.png" alt= "sort by rating" /></button>

<input id = "I1" />
<input id = "I2" />
<input id = "I3" />
<input id = "I4" />

and a js file:

<script type="text/javascript">

function ratingSort() {
let dataString = "Williams, Bill|Reynolds, Beverly|Smith, Paul";
let splitString = dataString.split("|");
let sorted = [];
let finalResult;
var members = [ 

{ "Rating": "1500", "Name": "Williams, Bill"}, 
{ "Rating": "2000", "Name": "Smith, Paul" }, 
{ "Rating": "1000", "Name": "Jones, Jim" }, 
{ "Rating": "1750", "Name": "Reynolds, Beverly" } ]

// sort by value
members.sort(function (a, b) {
return a.Rating - b.Rating;
});
members.map(i=>{sorted.push(i.Name)});
finalResult = sorted.filter(function(i) {return 
splitString.includes(i)});

console.log(finalResult);

for (let i = 0; i < finalResult.length; i++) {
$temp = finalResult[i]; 
if ($temp > "") {$("#I" + i).val($temp); 
$("#L" + i).css('background-color', "#7E91F8");
}
}
}

</script>

The code doesn't work and generates inconsistent results.

Look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Examples — Randy Casburn, Apr 07 '18 at 00:17
Possible duplicate of [How to sort JavaScript string array](https://stackoverflow.com/questions/38391009/how-to-sort-javascript-string-array) — Randy Casburn, Apr 07 '18 at 00:18
It's too complex, but it is informative. I expect the actual answer (assuming I get one) will also be very useful. — verlager, Apr 07 '18 at 00:20
The array lacks a second field for "Rating". This question is *not* the same as the one you cited. — verlager, Apr 07 '18 at 00:22
I was afraid of that, that's why I gave you the documentation reference before I marked it. look at the link I provide in the first comment. Your answer is in the first or second example. — Randy Casburn, Apr 07 '18 at 00:24
I'm using strings, the example you cited is using integers and combining the two arrays. That's nothing, not remotely, close to what I'm trying to do. — verlager, Apr 07 '18 at 00:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168433/discussion-between-verlager-and-randy-casburn). — verlager, Apr 07 '18 at 00:31
Where in the code you actually call `sort` a call like `splitString = splitString.sort(rank) ` should work — Moti Korets, Apr 07 '18 at 00:38
@verlager - please check my answer. It is based on the list of names in both `members` and `splitString` being the same. — Randy Casburn, Apr 07 '18 at 00:41
I checked... and posted your suggested code in my original question. But there must be an error in my implementation of your code (which I strongly suspect works fine). I just don't know what the heck to do. — verlager, Apr 07 '18 at 02:36

score 0 · Accepted Answer · answered Apr 07 '18 at 00:42

I would suggest to create a "name to rating map" and to use that map with a sort function.

// input data
var members = [{
    "Rating": "1500",
    "Name": "Williams, Bill"
  },
  {
    "Rating": "2000",
    "Name": "Smith, Paul"
  },
  {
    "Rating": "1000",
    "Name": "Jones, Jim"
  },
  {
    "Rating": "1750",
    "Name": "Reynolds, Beverly"
  }
]

var toSort = "Williams, Bill|Reynolds, Beverly|Smith, Paul|Jones, Jim|".split("|");

// SOLUTION:
// create a map.
var nameRatingMap = {};
members.forEach(function(element) {
  nameRatingMap[element.Name] = element.Rating;
});

console.log("name to rating map", nameRatingMap);

// use map for sorting
var sorted = toSort.sort(function(a, b) {
  var ratingA = nameRatingMap[a] || 0;
  var ratingB = nameRatingMap[b] || 0;
  return ratingB - ratingA;
})

console.log("solution", sorted);

I don't want to sort the members ... I want to sort the players in the tournament (splitString) by looking up each player's rating in members and listing the contents of the returned result in descending order. — verlager, Apr 07 '18 at 01:52
Take another look at the code. It's not sorting members, but the names in the splitString (variable "toSorted"). — Paul, Apr 07 '18 at 10:36

score -1 · Answer 2 · answered Apr 07 '18 at 00:38

Sort function will let you compare the ratings and return a value deppending on whos got a higgher rating.

With this you will re-order your arrays before you change the inputs.

The next code can be put inside a function:

members.sort(function(a, b) {
  let A = a.Rating;
  let B = b.Rating;
  if (A > B) {
    return -1;
  }
  if (A < B) {
    return 1;
  }
  return 0;
});

Hope this helps :)

For more info --> Sort docs

var members = [

  {
    "Rating": "1500",
    "Name": "Williams, Bill"
  },
  {
    "Rating": "2000",
    "Name": "Smith, Paul"
  },
  {
    "Rating": "1000",
    "Name": "Jones, Jim"
  },
  {
    "Rating": "1750",
    "Name": "Reynolds, Beverly"
  }
];

members.sort(function(a, b) {
  let A = a.Rating;
  let B = b.Rating;
  if (A > B) {
    return -1;
  }
  if (A < B) {
    return 1;
  }
  return 0;
});


for (let i = 0; i < members.length; i++) {
  $("#I" + (i + 1)).val(members[i].Name);
  $("#L" + i).css('background-color', "#B79EDF");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="I1" />
<input id="I2" />
<input id="I3" />
<input id="I4" />

re-order array based on json data

2 Answers2