Different order of objects while looping individually and printing all at once

Question

I have a response object, which has a key tags whose value is a json. I am trying to sort the json based on a key, then iterating through the list and pushing the objects to a react list. I see that when I print individually, they are coming as expected, but when I print as a whole, they are not in the same order.

sortTags: function (response) {
    tagss = []
    response.tags.sort((a, b) => a.disp_id - b.disp_id).map(function(tag) {
        console.log(tag)
        tagss.push(tag)
    });
    console.log(tagss)
    return tagss;
}

I see that when I do console.log(tag), it is printing in the order as expected. But console.log(tagss) is printing in a different order.

The question maybe very naive. Please do help. Thank you, in advance.

what do you want to achieve? `tagss` being somehow clone of sorted tags? — Apostolos, Jul 26 '20 at 15:17
@Apostolos Yes sir. I am expecting tagss to be sorted based on the disp_id key. I am also wondering, how an array or list's order is changed automatically. Thank you — Basant kumar Bhala, Jul 26 '20 at 15:20
@a2441918 sir/madam, my code belongs to react 0.10 version. I am not familiar with newer versions and codesandbox and stackblitz are throwing exceptions for my code. — Basant kumar Bhala, Jul 26 '20 at 15:22
I made a sandbox example of your code and it works as expected : https://playcode.io/641862/ — Çağatay Sel, Jul 26 '20 at 15:29
@ÇağataySel this is not working. log is showing not ordered array. also i don't understand the use of `map` function here. it doesnt do anything. it is useless in this senario. — Apostolos, Jul 26 '20 at 15:33
@Apostolos it does in my browser. I have added console logs for individual elements and it prints the array in the same order as console.log in map function — Çağatay Sel, Jul 26 '20 at 15:35
Try `console.log(tagss.join(' '))` - https://stackoverflow.com/q/4057440/1048572 — Bergi, Jul 26 '20 at 15:43
@ÇağataySel now it's working ok. but still i dont understand how to reproduce the senario that Basant is saying. — Apostolos, Jul 26 '20 at 15:49
@BasantkumarBhala You don't need map to do this. `sort` will return a newly created sorted array. You just have to do `const tagss = response.tags.sort((a, b) => a.disp_id - b.disp_id);`. — Christos Lytras, Jul 26 '20 at 15:56
Thank you every one for helping me out. @Apostolos sir, I don't know why you deleted your answer but [].concat actually worked for me. I couldn't mark your answer immediately and now, I couldn't find yours. Regarding the scenario, is it possible that I am facing it because my react version is too old? — Basant kumar Bhala, Jul 26 '20 at 16:44
@ÇağataySel I am surprised how we have the same code but the output is different for me. I don't know if it boils down to the factor that my react version is very old. I am thankful for your help. — Basant kumar Bhala, Jul 26 '20 at 16:44
@BasantkumarBhala I undeleted my answer. now it is visible again. this is pure js. it doesnt have to do - i guess - with how old the react version is. — Apostolos, Jul 26 '20 at 16:46

Christos Lytras · Accepted Answer · 2020-07-26T17:17:43.423

1

You don't need map to do this. sort will return a ~~newly created~~ sorted array. You just have to clone the tags array using the spread operator ... and then return the sort result return response.tags.sort((a, b) => a.disp_id - b.disp_id).

Run snippet to see it in action

const resp = {
  tags: [{
    name: "Nikos",
    disp_id: 45,
  }, {
    name: "Giorgos",
    disp_id: 25,
  }, {
    name: "Adreas",
    disp_id: 21,
  }, {
    name: "Maria",
    disp_id: 67,
  }, {
    name: "Panos",
    disp_id: 19,
  }]
};

const Sorter = {
  sortTags: function(response) {
    return [...response.tags].sort((a, b) => a.disp_id - b.disp_id);
  }
}

document.getElementById('result').textContent = JSON.stringify(
  Sorter.sortTags(resp)
, null, 2);

<pre id="result"></pre>

edited Jul 26 '20 at 17:17

answered Jul 26 '20 at 16:03

Christos Lytras

36,310
4
80
113

Thank you so much sir for your help. Since sort returns a newly sorted array, I guess I wont need to use 'tagss' in my code. Thanks a lot – Basant kumar Bhala Jul 26 '20 at 16:47
@BasantkumarBhala what I wrote was wrong. `sort` won't create a new array. You'll have to copy it using spread operator `[...array]` before you use sort. Check my updated answer which does that. – Christos Lytras Jul 26 '20 at 17:19

Apostolos · Answer 2 · 2020-07-26T15:40:04.560

0

You could just use the sort method and then if you want to clone the array, you could use concat.

response.tags.sort((a, b) => a.disp_id - b.disp_id)
tagss = [].concat(tags)

edited Jul 26 '20 at 15:40

answered Jul 26 '20 at 15:24

Apostolos

10,033
5
24
39

Initially I tried assigning the result of sort again to response.tags and then I observed that it did not retain the order after assignment. Hence I thought of using a new array and copying into it but with no luck. Both of your answers provided me with some insight of js. Thank you so much. – Basant kumar Bhala Jul 26 '20 at 16:56

Different order of objects while looping individually and printing all at once

2 Answers2

Run snippet to see it in action