Sort JSON response by key value

Before you tag this as duplicate - I've gone through these answers:

Sort JSON by array key value

Sort a JSON array object using Javascript by value

And I've tried moving the code over to my data, and it doesn't work. I've tried pushing each object item into an array as well, but that doesn't work because there's still an object inside each item.

Here's a bit of the JSON response I get (screenshot from the browser console)

As you can see, each item has an index - what I need is to sort the response according to the index. How do I do this?

This response is from wikipedia - as an aside. Here's the full API call, if it helps.

EDIT: Posting a bit of the response code here:

 "pages": {
      "736": {
        "pageid": 736,
        "ns": 0,
        "title": "Albert Einstein",
        "index": 2,
        "contentmodel": "wikitext",
        "pagelanguage": "en",
        "pagelanguagehtmlcode": "en",
        "pagelanguagedir": "ltr",
        "touched": "2018-01-24T22:40:11Z",
        "lastrevid": 821432412,
        "length": 145560,
        "fullurl": "https://en.wikipedia.org/wiki/Albert_Einstein",
        "editurl": "https://en.wikipedia.org/w/index.php?title=Albert_Einstein&action=edit",
        "canonicalurl": "https://en.wikipedia.org/wiki/Albert_Einstein",
        "thumbnail": {
          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/38px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
          "width": 38,
          "height": 50
        },
        "pageimage": "Einstein_1921_by_F_Schmutzer_-_restoration.jpg"
      },
      "983": {
        "pageid": 983,
        "ns": 0,
        "title": "Albert Camus",
        "index": 10,
        "contentmodel": "wikitext",
        "pagelanguage": "en",
        "pagelanguagehtmlcode": "en",
        "pagelanguagedir": "ltr",
        "touched": "2018-01-26T09:34:35Z",
        "lastrevid": 822358239,
        "length": 53639,
        "fullurl": "https://en.wikipedia.org/wiki/Albert_Camus",
        "editurl": "https://en.wikipedia.org/w/index.php?title=Albert_Camus&action=edit",
        "canonicalurl": "https://en.wikipedia.org/wiki/Albert_Camus",
        "thumbnail": {
          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Albert_Camus%2C_gagnant_de_prix_Nobel%2C_portrait_en_buste%2C_pos%C3%A9_au_bureau%2C_faisant_face_%C3%A0_gauche%2C_cigarette_de_tabagisme.jpg/42px-Albert_Camus%2C_gagnant_de_prix_Nobel%2C_portrait_en_buste%2C_pos%C3%A9_au_bureau%2C_faisant_face_%C3%A0_gauche%2C_cigarette_de_tabagisme.jpg",
          "width": 42,
          "height": 50
        },
        "pageimage": "Albert_Camus,_gagnant_de_prix_Nobel,_portrait_en_buste,_posé_au_bureau,_faisant_face_à_gauche,_cigarette_de_tabagisme.jpg"
      },
      "46721": {
        "pageid": 46721,
        "ns": 0,
        "title": "Edward VII",
        "index": 9,
        "contentmodel": "wikitext",
        "pagelanguage": "en",
        "pagelanguagehtmlcode": "en",
        "pagelanguagedir": "ltr",
        "touched": "2018-01-26T02:00:27Z",
        "lastrevid": 821663314,
        "length": 81925,
        "fullurl": "https://en.wikipedia.org/wiki/Edward_VII",
        "editurl": "https://en.wikipedia.org/w/index.php?title=Edward_VII&action=edit",
        "canonicalurl": "https://en.wikipedia.org/wiki/Edward_VII",
        "thumbnail": {
          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Edward_VII_in_coronation_robes.jpg/35px-Edward_VII_in_coronation_robes.jpg",
          "width": 35,
          "height": 50
        },
        "pageimage": "Edward_VII_in_coronation_robes.jpg"
      }

Answers:

Answer

This is my approach, just convert to an array and then get back the JSON Object.

UPDATE: What I did was create an array of every page then using the Array.prototype.sort() function for Arrays I compared the index for each page then using a for-loop I recreated the JSON object using the objects within the sorted Array.

var json = {
  "pages": {
    "983": {
      "pageid": 983,
      "ns": 0,
      "title": "Albert Camus",
      "index": 10,
      "contentmodel": "wikitext",
      "pagelanguage": "en",
      "pagelanguagehtmlcode": "en",
      "pagelanguagedir": "ltr",
      "touched": "2018-01-26T09:34:35Z",
      "lastrevid": 822358239,
      "length": 53639,
      "fullurl": "https://en.wikipedia.org/wiki/Albert_Camus",
      "editurl": "https://en.wikipedia.org/w/index.php?title=Albert_Camus&action=edit",
      "canonicalurl": "https://en.wikipedia.org/wiki/Albert_Camus",
      "thumbnail": {
        "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Albert_Camus%2C_gagnant_de_prix_Nobel%2C_portrait_en_buste%2C_pos%C3%A9_au_bureau%2C_faisant_face_%C3%A0_gauche%2C_cigarette_de_tabagisme.jpg/42px-Albert_Camus%2C_gagnant_de_prix_Nobel%2C_portrait_en_buste%2C_pos%C3%A9_au_bureau%2C_faisant_face_%C3%A0_gauche%2C_cigarette_de_tabagisme.jpg",
        "width": 42,
        "height": 50
      },
      "pageimage": "Albert_Camus,_gagnant_de_prix_Nobel,_portrait_en_buste,_posé_au_bureau,_faisant_face_à_gauche,_cigarette_de_tabagisme.jpg"
    },
    "736": {
      "pageid": 736,
      "ns": 0,
      "title": "Albert Einstein",
      "index": 2,
      "contentmodel": "wikitext",
      "pagelanguage": "en",
      "pagelanguagehtmlcode": "en",
      "pagelanguagedir": "ltr",
      "touched": "2018-01-24T22:40:11Z",
      "lastrevid": 821432412,
      "length": 145560,
      "fullurl": "https://en.wikipedia.org/wiki/Albert_Einstein",
      "editurl": "https://en.wikipedia.org/w/index.php?title=Albert_Einstein&action=edit",
      "canonicalurl": "https://en.wikipedia.org/wiki/Albert_Einstein",
      "thumbnail": {
        "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/38px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
        "width": 38,
        "height": 50
      },
      "pageimage": "Einstein_1921_by_F_Schmutzer_-_restoration.jpg"
    }
  }
};

var array = [];
for (key in json.pages) {
  array.push(json.pages[key]);
}

array.sort(function(a, b) {
  return a.index - b.index;
});

json = {
  "pages": {}
};

for (var i = 0; i < array.length; i++) {
  json.pages[array[i]['pageid']] = array[i];
}

console.log(json);

Hope it helps!

Answer

Your response seems to be an object, which can't be sorted. You first want to convert it into an array

const res = //... your response
const array = Object.keys(res).map(key => res[key]);

Now you can use the Array.sort function to sort your items by their index:

array.sort((itemA, itemB) =>  itemA - itemB)

Be aware that the sort function directly mutates the array.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer

I created these functions to order a json so that it would also work if there was another json inside it.

function orderJson(json) {
    let ordered = this.jsonToSortedArray(json);
    let result = this.arrayToStringJson(ordered);
    return JSON.parse(result);
}

function jsonToSortedArray(json) {
    let ordered = [];
    for (let i in json) {
        let value;
        if (json[i] instanceof Object) {
            value = jsonToSortedArray(json[i]);
        } else {
            value = json[i];
        }
        ordered.push([i, value]);
    }
    return ordered.sort();
}

function arrayToStringJson(ordered) {
    let result = '{'
    for (let i = 0; i < ordered.length; i++) {
        const key = '"' + ordered[i][0] + '"';
        let value;
        if (ordered[i][1] instanceof Array) {
            value = ':' + this.arrayToStringJson(ordered[i][1]) + ',';
        } else {
            value = ':"' + ordered[i][1] + '",';
        }
        result += key + value;
    }
    result = result.substring(0, result.length - 1);
    return result + '}';
}

If you want the json as a string do not use the function JSON.parse

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.