Sort array of objects having the offsets in javascript

Question

I am new to web development. Here, I do have an array which is like

[{
        endOffset: "50"
        startOffset: "25"
        type: "Education"
    },
    {
        endOffset: "67"
        startOffset: "55"
        type: "address"
    },
    {
        endOffset: "65"
        startOffset: "59"
        type: "project"
    },
    {
        endOffset: "80"
        startOffset: "70"
        type:"fullname"
    }]

In this array of objects , now I am sorting it on the basis of the endoffsets . Which is like ->

jsonDataArray.sort(function (a, b) {
            return a.startOffset - b.startOffset;
          });

Then Its giving me the sorted array. But here it is sorting on the basis of only startoffset.

What I want is that I want to have an array like which will have sort on ascending order of both start and endoffset, so that the array will be like

[{
 starOffset: "25",
 type: "Education"
}, {
 endOffset: "50"
 type: "Education" },

{
 startoffset: "55"
 type: "address" },
{
 startoffset: "59"
 type: "project" },
{
 endoffset: "65"
 type: "project" },

{
 endoffset: "67"
 type: "address" 
},
{
 endoffset: "67"
 type: "address" 
},
{
 startOffset: "70"
 type: "address" 
},
{
 endoffset: "80"
 type: "address" 
},

]

So, How can I do this ? Can any one please help me with this ?

You can check this topic: "[How to sort an array of objects by multiple fields?](https://stackoverflow.com/questions/6913512/how-to-sort-an-array-of-objects-by-multiple-fields)", it seems related to your issue. — Maxime Lafarie, Apr 30 '18 at 13:35
To save you from future headaches/problems: There's no [JSON](http://json.org) involved in your code - `jsonDataArray` is an array of objects and is not in any way related to JSON. — Andreas, Apr 30 '18 at 13:38
So if startOffset is the same you want to sort by endOffset? — HMR, Apr 30 '18 at 13:41
So, In this case the one which appeared first will added first in array — ganesh kaspate, Apr 30 '18 at 13:42

Ankit Agarwal · Answer 1 · 2018-04-30T14:01:28.917

1

First create the desired array with startOffset and endOffset in separate object then you can assign the value for aVal and bVal to sort for by having condition in your sort function as mentioned below in code:

var jsonDataArray = [{
        endOffset: "50",
        startOffset: "25",
        type: "Education"
    },
    {
        endOffset: "67",
        startOffset: "65",
        type: "address"
    },
    {
        endOffset: "65",
        startOffset: "59",
        type: "project"
    },
    {
        endOffset: "80",
        startOffset: "70",
        type:"fullname"
    }];

var newJSON = [];
jsonDataArray.forEach((obj)=>{
  var  tempObj = {
     endOffset: obj.endOffset,
     type: obj.type
  };
  newJSON.push(tempObj);
  tempObj = {
     startOffset: obj.startOffset,
     type: obj.type
  };
  newJSON.push(tempObj);
});
newJSON.sort(function (a, b) {
  var aVal = a.startOffset?a.startOffset:a.endOffset;
  var bVal = b.startOffset?b.startOffset:b.endOffset;
  return aVal - bVal;
});
console.log(newJSON);

edited Apr 30 '18 at 14:01

answered Apr 30 '18 at 13:36

Ankit Agarwal

30,378
5
37
62

Here the first one is my jsonData array. The next one is my expected output. – ganesh kaspate Apr 30 '18 at 13:38
Hey, what will happen if the offsets are same ? – ganesh kaspate Apr 30 '18 at 13:57
They will still work because there is a condition there if it found `startOffset` present in object it will use that else it will use `endOffset` and the code is certain that there will be either `startOffset` or `endOffset` @ganeshkaspate – Ankit Agarwal Apr 30 '18 at 14:00
@ganeshkaspate you can use this instead of really abstract code as this will allow you to change your code easily and it is also lot more understanding when you look at a glance – Ankit Agarwal Apr 30 '18 at 14:00
Okay Ankit. Thanks for the help. Great solution. – ganesh kaspate Apr 30 '18 at 14:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170090/discussion-between-ankit-agarwal-and-ganesh-kaspate). – Ankit Agarwal Apr 30 '18 at 14:01
Here , If you have a 0 value as a startoffset then this is not sorting according to that. – ganesh kaspate Jul 10 '18 at 09:40

Nina Scholz · Answer 2 · 2018-04-30T14:32:33.703

You could create a new array with start and end values and sort them by taking either the start or end value.

var data = [{ endOffset: "50", startOffset: "25", type: "Education" }, { endOffset: "67", startOffset: "55", type: "address" }, { endOffset: "65", startOffset: "59", type: "project" }, { endOffset: "80", startOffset: "70", type: "fullname" }],
    extended = data.reduce(
        (r, { endOffset, startOffset, type }) =>
            r.concat({ startOffset, type }, { endOffset, type }), []);

extended.sort((a, b) => (a.startOffset || a.endOffset) - (b.startOffset || b.endOffset));

console.log(extended);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES5

var data = [{ endOffset: "50", startOffset: "25", type: "Education" }, { endOffset: "67", startOffset: "55", type: "address" }, { endOffset: "65", startOffset: "59", type: "project" }, { endOffset: "80", startOffset: "70", type: "fullname" }],
    extended = data.reduce(function (r, o) {
        return r.concat(
            { startOffset: o.startOffset, type: o.type },
            { endOffset: o.endOffset, type: o.type }
        );
    }, []);

extended.sort(function (a, b) {
    return (a.startOffset || a.endOffset) - (b.startOffset || b.endOffset);
});

console.log(extended);

.as-console-wrapper { max-height: 100% !important; top: 0; }

HMR · Answer 3 · 2018-04-30T14:17:41.583

0

The following sorts on startOffset first then by endOffset:

const array = [{
  endOffset: "50",
  startOffset: "25",
  type: "Education"
},
{
  endOffset: "67",
  startOffset: "55",
  type: "address"
},
{
  endOffset: "65",
  startOffset: "59",
  type: "project"
},
{
  endOffset: "80",
  startOffset: "70",
  type:"fullname"
}]

console.log(
  array.reduce(
    (result,item)=>result.concat([
      {startOffset:item.startOffset,type:item.type},
      {endOffset:item.endOffset,type:item.type}
    ]),
    []
  ).sort(
    (a,b)=>(a.startOffset||a.endOffset)-(b.startOffset||b.endOffset)
  )
)

edited Apr 30 '18 at 14:17

answered Apr 30 '18 at 13:46

HMR

37,593
24
91
160

And I am using ES5 – ganesh kaspate Apr 30 '18 at 13:47
@ganeshkaspate Then you use type `functrion(){return` instead of `()=>` – HMR Apr 30 '18 at 13:48
This is nice .Actually, I want to have this in the seperate way, like the array which I given. – ganesh kaspate Apr 30 '18 at 13:50
It does not natter for me start or end as long as there is an ascending order . – ganesh kaspate Apr 30 '18 at 13:52
@ganeshkaspate Ok, I think I understand what you wanted. Updated the answer. – HMR Apr 30 '18 at 14:18

Sort array of objects having the offsets in javascript

3 Answers3