trier les propriétés de l'objet et JSON.stringify

Mon application dispose d'un large éventail d'objets, que je stringifie et que je sauvegarde sur le disque. Malheureusement, lorsque les objets du tableau sont manipulés, et parfois remplacés, les propriétés des objets sont répertoriées dans des ordres différents (leur ordre de création?). Lorsque je fais JSON.stringify () sur le tableau et que je l'enregistre, un diff montre que les propriétés sont répertoriées dans des ordres différents, ce qui est ennuyeux lorsque je tente de fusionner les données davantage avec des outils de diff et de fusion.

Idéalement, je voudrais trier les propriétés des objets par ordre alphabétique avant d'effectuer le stringify, ou dans le cadre de l'opération stringify. Il existe du code pour manipuler les objets du tableau à de nombreux endroits, et les modifier pour toujours créer des propriétés dans un ordre explicite serait difficile.

Les suggestions seraient les bienvenues!

Un exemple condensé:

obj = {}; obj.name="X"; obj.os="linux";
JSON.stringify(obj);
obj = {}; obj.os="linux"; obj.name="X";
JSON.stringify(obj);

La sortie de ces deux appels stringify est différente et apparaît dans un diff de mes données, mais mon application ne se soucie pas de l'ordre des propriétés. Les objets sont construits de nombreuses manières et à différents endroits.

L'approche la plus simple, moderne et actuellement prise en charge par le navigateur est simplement la suivante:

JSON.stringify(sortMyObj, Object.keys(sortMyObj).sort());

Cependant, cette méthode supprime tous les objets imbriqués qui ne sont pas référencés et ne s'applique pas aux objets dans les tableaux. Vous voudrez également aplatir l'objet de tri si vous voulez quelque chose comme cette sortie:

{"a":{"h":4,"z":3},"b":2,"c":1}

Vous pouvez le faire avec ceci:

var flattenObject = function(ob) {
    var toReturn = {};

    for (var i in ob) {
        if (!ob.hasOwnProperty(i)) continue;

        if ((typeof ob[i]) == 'object') {
            var flatObject = flattenObject(ob[i]);
            for (var x in flatObject) {
                if (!flatObject.hasOwnProperty(x)) continue;

                toReturn[i + '.' + x] = flatObject[x];
            }
        } else {
            toReturn[i] = ob[i];
        }
    }
    return toReturn;
};

JSON.stringify(sortMyObj, Object.keys(flattenObject(sortMyObj)).sort());

Pour le faire par programme avec quelque chose que vous pouvez modifier vous-même, vous devez pousser les noms de propriété de l'objet dans un tableau, puis trier le tableau par ordre alphabétique et parcourir ce tableau (qui sera dans le bon ordre) et sélectionner chaque valeur de l'objet dans cet ordre. "hasOwnProperty" est également coché afin que vous n'ayez définitivement que les propres propriétés de l'objet. Voici un exemple:

var obj = {"a":1,"b":2,"c":3};

function iterateObjectAlphabetically(obj, callback) {
    var arr = [],
        i;

    for (i in obj) {
        if (obj.hasOwnProperty(i)) {
            arr.push(i);
        }
    }

    arr.sort();

    for (i = 0; i < arr.length; i++) {
        var key = obj[arr[i]];
        //console.log( obj[arr[i]] ); //here is the sorted value
        //do what you want with the object property
        if (callback) {
            // callback returns arguments for value, key and original object
            callback(obj[arr[i]], arr[i], obj);
        }
    }
}

iterateObjectAlphabetically(obj, function(val, key, obj) {
    //do something here
});

Encore une fois, cela devrait garantir que vous parcourez dans l'ordre alphabétique.

Enfin, pour aller plus loin pour la manière la plus simple, cette bibliothèque vous permettra de trier récursivement tout JSON que vous lui passez: https://www.npmjs.com/package/json-stable-stringify

var stringify = require('json-stable-stringify');
var obj = { c: 8, b: [{z:6,y:5,x:4},7], a: 3 };
console.log(stringify(obj));

Production

{"a":3,"b":[{"x":4,"y":5,"z":6},7],"c":8}

Je pense que si vous contrôlez la génération JSON (et cela ressemble à vous), alors pour vos besoins, cela pourrait être une bonne solution: json-stable-stringify

Depuis le site Web du projet:

JSON.stringify () déterministe avec tri personnalisé pour obtenir des hachages déterministes à partir de résultats stringifiés

Si le JSON produit est déterministe, vous devriez pouvoir le comparer / le fusionner facilement.

Vous pouvez passer un tableau trié des noms de propriétés comme deuxième argument de JSON.stringify():

JSON.stringify(obj, Object.keys(obj).sort())

Je ne comprends pas pourquoi la complexité des meilleures réponses actuelles est nécessaire, pour obtenir toutes les clés de manière récursive. À moins que des performances parfaites ne soient nécessaires, il me semble que nous pouvons simplement appeler JSON.stringify()deux fois, la première fois pour obtenir toutes les clés, et la deuxième fois, pour vraiment faire le travail. De cette façon, toute la complexité de la récursivité est gérée par stringify, et nous savons qu'il connaît son contenu et comment gérer chaque type d'objet:

function JSONstringifyOrder( obj, space )
{
    var allKeys = [];
    JSON.stringify( obj, function( key, value ){ allKeys.push( key ); return value; } )
    allKeys.sort();
    return JSON.stringify( obj, allKeys, space );
}

Mise à jour 2018-7-24:

Cette version trie les objets imbriqués et prend également en charge les tableaux:

function sortObjByKey(value) {
  return (typeof value === 'object') ?
    (Array.isArray(value) ?
      value.map(sortObjByKey) :
      Object.keys(value).sort().reduce(
        (o, key) => {
          const v = value[key];
          o[key] = sortObjByKey(v);
          return o;
        }, {})
    ) :
    value;
}


function orderedJsonStringify(obj) {
  return JSON.stringify(sortObjByKey(obj));
}

Cas de test:

  describe('orderedJsonStringify', () => {
    it('make properties in order', () => {
      const obj = {
        name: 'foo',
        arr: [
          { x: 1, y: 2 },
          { y: 4, x: 3 },
        ],
        value: { y: 2, x: 1, },
      };
      expect(orderedJsonStringify(obj))
        .to.equal('{"arr":[{"x":1,"y":2},{"x":3,"y":4}],"name":"foo","value":{"x":1,"y":2}}');
    });

    it('support array', () => {
      const obj = [
        { x: 1, y: 2 },
        { y: 4, x: 3 },
      ];
      expect(orderedJsonStringify(obj))
        .to.equal('[{"x":1,"y":2},{"x":3,"y":4}]');
    });

  });

Réponse obsolète:

Une version concise dans ES2016. Crédit à @codename, de https://stackoverflow.com/a/29622653/94148

function orderedJsonStringify(o) {
  return JSON.stringify(Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {}));
}

https://gist.github.com/davidfurlong/463a83a33b70a3b6618e97ec9679e490

const replacer = (key, value) =>
    value instanceof Object && !(value instanceof Array) ? 
        Object.keys(value)
        .sort()
        .reduce((sorted, key) => {
            sorted[key] = value[key];
            return sorted 
        }, {}) :
        value;

C'est la même chose que la réponse de Satpal Singh

function stringifyJSON(obj){
    keys = [];
    if(obj){
        for(var key in obj){
            keys.push(key);
        }
    }
    keys.sort();
    var tObj = {};
    var key;
    for(var index in keys){
        key = keys[index];
        tObj[ key ] = obj[ key ];
    }
    return JSON.stringify(tObj);
}

obj1 = {}; obj1.os="linux"; obj1.name="X";
stringifyJSON(obj1); //returns "{"name":"X","os":"linux"}"

obj2 = {}; obj2.name="X"; obj2.os="linux";
stringifyJSON(obj2); //returns "{"name":"X","os":"linux"}"

Vous pouvez ajouter une personnalisation toJSON fonction à votre objet que vous pouvez utiliser pour personnaliser la sortie. À l'intérieur de la fonction, l'ajout des propriétés actuelles à un nouvel objet dans un ordre spécifique doit conserver cet ordre lorsqu'il est stringifié.

Vois ici:

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify

Il n'y a pas de méthode intégrée pour contrôler l'ordre, car les données JSON sont censées être accessibles par des clés.

Voici un jsfiddle avec un petit exemple:

http://jsfiddle.net/Eq2Yw/

Essayez de commenter la toJSONfonction - l'ordre des propriétés est inversé. Veuillez noter que cela peut être spécifique au navigateur, c'est-à-dire que la commande n'est pas officiellement prise en charge dans la spécification. Cela fonctionne dans la version actuelle de Firefox, mais si vous voulez une solution 100% robuste, vous devrez peut-être écrire votre propre fonction stringifier.

Éditer:

Voir également cette question SO concernant la sortie non déterministe de stringify, en particulier les détails de Daff sur les différences de navigateur:

Comment vérifier de manière déterministe qu'un objet JSON n'a pas été modifié?

Une réponse récursive et simplifiée:

function sortObject(obj) {
    if(typeof obj !== 'object')
        return obj
    var temp = {};
    var keys = [];
    for(var key in obj)
        keys.push(key);
    keys.sort();
    for(var index in keys)
        temp[keys[index]] = sortObject(obj[keys[index]]);       
    return temp;
}

var str = JSON.stringify(sortObject(obj), undefined, 4);

Vous pouvez trier l'objet par nom de propriété dans EcmaScript 2015

function sortObjectByPropertyName(obj) {
    return Object.keys(obj).sort().reduce((c, d) => (c[d] = obj[d], c), {});
}

J'ai pris la réponse de @Jason Parham et j'ai apporté quelques améliorations

function sortObject(obj, arraySorter) {
    if(typeof obj !== 'object')
        return obj
    if (Array.isArray(obj)) {
        if (arraySorter) {
            obj.sort(arraySorter);
        }
        for (var i = 0; i < obj.length; i++) {
            obj[i] = sortObject(obj[i], arraySorter);
        }
        return obj;
    }
    var temp = {};
    var keys = [];
    for(var key in obj)
        keys.push(key);
    keys.sort();
    for(var index in keys)
        temp[keys[index]] = sortObject(obj[keys[index]], arraySorter);       
    return temp;
}

Cela résout le problème de la conversion des tableaux en objets et vous permet également de définir comment trier les tableaux.

Exemple:

var data = { content: [{id: 3}, {id: 1}, {id: 2}] };
sortObject(data, (i1, i2) => i1.id - i2.id)

production:

{content:[{id:1},{id:2},{id:3}]}

La réponse acceptée ne fonctionne pas pour moi pour les objets imbriqués pour une raison quelconque. Cela m'a amené à coder le mien. Comme il est fin 2019 lorsque j'écris ceci, il y a quelques autres options disponibles dans la langue.

Mise à jour: Je pense que la réponse de David Furlong est une approche préférable à ma tentative précédente, et je l'ai écartée. Le mien repose sur le support d'Object.entries (...), donc pas de support d'Internet Explorer.

function normalize(sortingFunction) {
  return function(key, value) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      return Object
        .entries(value)
        .sort(sortingFunction || undefined)
        .reduce((acc, entry) => {
          acc[entry[0]] = entry[1];
          return acc;
        }, {});
    }
    return value;
  }
}

JSON.stringify(obj, normalize(), 2);

-

CONSERVER CETTE ANCIENNE VERSION POUR RÉFÉRENCE HISTORIQUE

J'ai trouvé qu'un tableau simple et plat de toutes les clés de l'objet fonctionnera. Dans presque tous les navigateurs (pas Edge ou Internet Explorer, comme on pouvait s'y attendre ) et Node 12+, il existe une solution assez courte maintenant que Array.prototype.flatMap (...) est disponible. (L'équivalent lodash fonctionnerait aussi.) Je n'ai testé que dans Safari, Chrome et Firefox, mais je ne vois aucune raison pour laquelle cela ne fonctionnerait pas ailleurs qui prend en charge flatMap et JSON.stringify standard (...) .

function flattenEntries([key, value]) {
  return (typeof value !== 'object')
    ? [ [ key, value ] ]
    : [ [ key, value ], ...Object.entries(value).flatMap(flattenEntries) ];
}

function sortedStringify(obj, sorter, indent = 2) {
  const allEntries = Object.entries(obj).flatMap(flattenEntries);
  const sorted = allEntries.sort(sorter || undefined).map(entry => entry[0]);
  return JSON.stringify(obj, sorted, indent);
}

Avec cela, vous pouvez stringify sans dépendances tierces et même passer votre propre algorithme de tri qui trie sur les paires d'entrées clé-valeur, de sorte que vous pouvez trier par clé, charge utile ou une combinaison des deux. Fonctionne pour les objets imbriqués, les tableaux et tout mélange d'anciens types de données.

const obj = {
  "c": {
    "z": 4,
    "x": 3,
    "y": [
      2048,
      1999,
      {
        "x": false,
        "g": "help",
        "f": 5
      }
    ]
  },
  "a": 2,
  "b": 1
};

console.log(sortedStringify(obj, null, 2));

Impressions:

{
  "a": 2,
  "b": 1,
  "c": {
    "x": 3,
    "y": [
      2048,
      1999,
      {
        "f": 5,
        "g": "help",
        "x": false
      }
    ],
    "z": 4
  }
}

Si vous devez être compatible avec les moteurs JavaScript plus anciens , vous pouvez utiliser ces versions légèrement plus détaillées qui émulent le comportement de flatMap. Le client doit prendre en charge au moins ES5, donc pas d'Internet Explorer 8 ou inférieur.

Ceux-ci renverront le même résultat que ci-dessus.

function flattenEntries([key, value]) {
  if (typeof value !== 'object') {
    return [ [ key, value ] ];
  }
  const nestedEntries = Object
    .entries(value)
    .map(flattenEntries)
    .reduce((acc, arr) => acc.concat(arr), []);
  nestedEntries.unshift([ key, value ]);
  return nestedEntries;
}

function sortedStringify(obj, sorter, indent = 2) {
  const sortedKeys = Object
    .entries(obj)
    .map(flattenEntries)
    .reduce((acc, arr) => acc.concat(arr), [])
    .sort(sorter || undefined)
    .map(entry => entry[0]);
  return JSON.stringify(obj, sortedKeys, indent);
}

Fonctionne avec lodash, objets imbriqués, toute valeur d'attribut d'objet:

function sort(myObj) {
  var sortedObj = {};
  Object.keys(myObj).sort().forEach(key => {
    sortedObj[key] = _.isPlainObject(myObj[key]) ? sort(myObj[key]) : myObj[key]
  })
  return sortedObj;
}
JSON.stringify(sort(yourObj), null, 2)

Il repose sur le comportement de Chrome et de Node selon lequel la première clé affectée à un objet est sortie en premier JSON.stringify.

Essayer:

function obj(){
  this.name = '';
  this.os = '';
}

a = new obj();
a.name = 'X',
a.os = 'linux';
JSON.stringify(a);
b = new obj();
b.os = 'linux';
b.name = 'X',
JSON.stringify(b);

J'ai créé une fonction pour trier l'objet, et avec callback .. qui crée en fait un nouvel objet

function sortObj( obj , callback ) {

    var r = [] ;

    for ( var i in obj ){
        if ( obj.hasOwnProperty( i ) ) {
             r.push( { key: i , value : obj[i] } );
        }
    }

    return r.sort( callback ).reduce( function( obj , n ){
        obj[ n.key ] = n.value ;
        return obj;
    },{});
}

et appelez-le avec un objet.

var obj = {
    name : "anu",
    os : "windows",
    value : 'msio',
};

var result = sortObj( obj , function( a, b ){
    return a.key < b.key  ;    
});

JSON.stringify( result )

qui imprime {"value":"msio","os":"windows","name":"anu"}, et pour le tri avec valeur.

var result = sortObj( obj , function( a, b ){
    return a.value < b.value  ;    
});

JSON.stringify( result )

qui imprime {"os":"windows","value":"msio","name":"anu"}

Si les objets de la liste n'ont pas les mêmes propriétés, générez un objet maître combiné avant stringify:

let arr=[ <object1>, <object2>, ... ]
let o = {}
for ( let i = 0; i < arr.length; i++ ) {
  Object.assign( o, arr[i] );
}
JSON.stringify( arr, Object.keys( o ).sort() );

function FlatternInSort( obj ) {
    if( typeof obj === 'object' )
    {
        if( obj.constructor === Object )
        {       //here use underscore.js
            let PaireStr = _( obj ).chain().pairs().sortBy( p => p[0] ).map( p => p.map( FlatternInSort ).join( ':' )).value().join( ',' );
            return '{' + PaireStr + '}';
        }
        return '[' + obj.map( FlatternInSort ).join( ',' ) + ']';
    }
    return JSON.stringify( obj );
}

// exemple comme ci-dessous. dans chaque couche, pour des objets comme {}, aplatis dans le tri par clé. pour les tableaux, les nombres ou les chaînes, aplatis comme / avec JSON.stringify.

FlatternInSort ({c: 9, b: {y: 4, z: 2, e: 9}, F: 4, a: [{j: 8, h: 3}, {a: 3, b: 7}] })

"{" F ": 4," a ": [{" h ": 3," j ": 8}, {" a ": 3," b ": 7}]," b ": {" e " : 9, "y": 4, "z": 2}, "c": 9} "

Extension de la réponse d'AJP, pour gérer les tableaux:

function sort(myObj) {
    var sortedObj = {};
    Object.keys(myObj).sort().forEach(key => {
        sortedObj[key] = _.isPlainObject(myObj[key]) ? sort(myObj[key]) : _.isArray(myObj[key])? myObj[key].map(sort) : myObj[key]
    })
    return sortedObj;
}

Surpris, personne n'a mentionné la isEqualfonction de lodash .

Effectue une comparaison approfondie entre deux valeurs pour déterminer si elles sont équivalentes.

Remarque: Cette méthode prend en charge la comparaison de tableaux, de tampons de tableau, de booléens, d'objets de date, d'objets d'erreur, de mappes, de nombres, d'objets Object, d'expressions régulières, d'ensembles, de chaînes, de symboles et de tableaux typés. Les objets objets sont comparés par leurs propres propriétés énumérables, non héritées. Les fonctions et les nœuds DOM sont comparés par égalité stricte, c'est-à-dire ===.

https://lodash.com/docs/4.17.11#isEqual

Avec le problème d'origine - les clés étant ordonnées de manière incohérente - c'est une excellente solution - et bien sûr, il s'arrêtera simplement s'il trouve un conflit au lieu de sérialiser aveuglément l'objet entier.

Pour éviter d'importer toute la bibliothèque, procédez comme suit:

import { isEqual } from "lodash-es";

Exemple bonus: vous pouvez également l'utiliser avec RxJS avec cet opérateur personnalisé

export const distinctUntilEqualChanged = <T>(): MonoTypeOperatorFunction<T> => 
                                                pipe(distinctUntilChanged(isEqual));

Après tout, il a besoin d'un tableau qui met en cache toutes les clés de l'objet imbriqué (sinon il omettra les clés non mises en cache.) La réponse la plus ancienne est tout simplement fausse, car le second argument ne se soucie pas de la notation par points. Ainsi, la réponse (en utilisant Set) devient.

function stableStringify (obj) {
  const keys = new Set()
  const getAndSortKeys = (a) => {
    if (a) {
      if (typeof a === 'object' && a.toString() === '[object Object]') {
        Object.keys(a).map((k) => {
          keys.add(k)
          getAndSortKeys(a[k])
        })
      } else if (Array.isArray(a)) {
        a.map((el) => getAndSortKeys(el))
      }
    }
  }
  getAndSortKeys(obj)
  return JSON.stringify(obj, Array.from(keys).sort())
}

Voici une approche de clonage ... clonez l'objet avant de le convertir en json:

function sort(o: any): any {
    if (null === o) return o;
    if (undefined === o) return o;
    if (typeof o !== "object") return o;
    if (Array.isArray(o)) {
        return o.map((item) => sort(item));
    }
    const keys = Object.keys(o).sort();
    const result = <any>{};
    keys.forEach((k) => (result[k] = sort(o[k])));
    return result;
}

Si est très nouveau mais semble fonctionner correctement sur les fichiers package.json.

Il existe une Array.sortméthode qui peut vous être utile. Par exemple:

yourBigArray.sort(function(a,b){
    //custom sorting mechanism
});