Different output to console in the browser and IDE

Question

I'm using javascript to sort objects in an array based on two attributes: "created" representing the creation time and "finished" representing if the task is done:

let tasks = [];

let task1 = {
    "id" : 1,
    "job" : "t1",
    "created" : 100,
    "end" : 0,
    "finished" : 1,
}

let task2 = {
    "id" : 2,
    "job" : "t2",
    "created" : 101,
    "end" : 105,
    "finished" : 1,
}


let task3 = {
    "id" : 3,
    "job" : "t3",
    "created" : 102,
    "end" : 0,
    "finished" : 0,
}

let taks4 = {
    "id" : 4,
    "job" : "t4",
    "created" : 103,
    "end" : 104,
    "finished" : 1,
    
}

let task5 = {
    "id" : 5,
    "job" : "t5",
    "created" : 104,
    "end" : 0,
    "finished" :0,
    
}


function compare(a,b){
    if (a.finished < b.finished){
        return -1;
    }
    else if (a.finished === b.finished){
        if(a.finished === 0){
            return a.created - b.created
        }
        else if(a.finished === 1){
            return b.end - a.end
        }
    }
    return 0;
}
tasks.push(task1);
tasks.push(task2);
tasks.push(task3);
tasks.push(taks4);
tasks.push(task5);

console.log(tasks)

console.log("sort here")

tasks.sort(compare);

console.log(tasks)

tasks[1].created=106;
tasks[3].end=108;

console.log("sort here")
tasks.sort(compare);


console.log(tasks)

It works in my IDE while I just press "Run" button and check the output:

[
  { id: 1, job: 't1', created: 100, end: 0, finished: 1 },
  { id: 2, job: 't2', created: 101, end: 105, finished: 1 },
  { id: 3, job: 't3', created: 102, end: 0, finished: 0 },
  { id: 4, job: 't4', created: 103, end: 104, finished: 1 },
  { id: 5, job: 't5', created: 104, end: 0, finished: 0 }
]
sort here
[
  { id: 3, job: 't3', created: 102, end: 0, finished: 0 },
  { id: 5, job: 't5', created: 104, end: 0, finished: 0 },
  { id: 2, job: 't2', created: 101, end: 105, finished: 1 },
  { id: 4, job: 't4', created: 103, end: 104, finished: 1 },
  { id: 1, job: 't1', created: 100, end: 0, finished: 1 }
]
sort here
[
  { id: 3, job: 't3', created: 102, end: 0, finished: 0 },
  { id: 5, job: 't5', created: 106, end: 0, finished: 0 },
  { id: 4, job: 't4', created: 103, end: 108, finished: 1 },
  { id: 2, job: 't2', created: 101, end: 105, finished: 1 },
  { id: 1, job: 't1', created: 100, end: 0, finished: 1 }
]

However, when I tried to apply this script in my HTML file, the browser's output it different:

I need to use this to sort the array as the input from the webpage, how could I correct it?

I tried to use different to browser but they returns the same results on their consoles.

score 1 · Answer 1 · answered Nov 10 '22 at 18:46

Different dev tools have special formatting rules when JSON is printed. To avoid this, you can pretty stringify JSON:

console.log(JSON.stringify({a: 1, b: 2}, null, 4))

OR, if you're comfortable with dev tools, you can try setting JSON as a global variable.

Different output to console in the browser and IDE

1 Answers1