web-dev-qa-db-fra.com

Aplatir un objet javascript pour passer en chaîne de requête

J'ai un objet javascript que j'ai besoin d'aplatir en une chaîne pour pouvoir passer en chaîne de requête, comment faire? c'est à dire:

{ cost: 12345, insertBy: 'testUser' } deviendrait cost=12345&insertBy=testUser

Je ne peux pas utiliser jQuery AJAX appel pour cet appel, je sais que nous pouvons l'utiliser et passer l'objet en tant que data mais pas dans ce cas. Utiliser jQuery pour aplatir en l'objet serait bien cependant.

Merci.

javascriptjqueryjavascript-objectsflatten
54
Saxman

Tu veux jQuery.param :

var str = $.param({ cost: 12345, insertBy: 'testUser' });
// "cost=12345&insertBy=testUser"

Notez que c'est la fonction utilisée en interne par jQuery pour sérialiser les objets passés comme argument data.

66
lonesomeday

Voici une version non jQuery:

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.Push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
        }
    }
    return parts.join("&");
}
81
Tim Down

Ma version ES6 (Javascript pur, pas de jQuery):

function toQueryString(paramsObject) {
  return Object
    .keys(paramsObject)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(paramsObject[key])}`)
    .join('&')
  ;
}
35
Michaël Perrin

Voici une autre version non jQuery qui utilise lodash ou underscore si vous utilisez déjà l'une de ces bibliothèques:

var toQueryString = function(obj) {
  return _.map(obj,function(v,k){
    return encodeURIComponent(k) + '=' + encodeURIComponent(v);
  }).join('&');
};
16
Guy

Essayez la méthode $.param() :

var result = $.param({ cost: 12345, insertBy: 'testUser' });
15
Darin Dimitrov

C'est une vieille question, mais en haut des recherches Google, j'ajoute donc ceci pour être complet.

Si 1) vous ne voulez pas utiliser jQuery, mais 2) vous voulez convertir un objet imbriqué en une chaîne de requête, alors (à partir des réponses de Tim Down et de Guy), utilisez ceci:

function toQueryString(obj, urlEncode) {
    //
    // Helper function that flattens an object, retaining key structer as a path array:
    //
    // Input: { prop1: 'x', prop2: { y: 1, z: 2 } }
    // Example output: [
    //     { path: [ 'prop1' ],      val: 'x' },
    //     { path: [ 'prop2', 'y' ], val: '1' },
    //     { path: [ 'prop2', 'z' ], val: '2' }
    // ]
    //
    function flattenObj(x, path) {
        var result = [];

        path = path || [];
        Object.keys(x).forEach(function (key) {
            if (!x.hasOwnProperty(key)) return;

            var newPath = path.slice();
            newPath.Push(key);

            var vals = [];
            if (typeof x[key] == 'object') {
                vals = flattenObj(x[key], newPath);
            } else {
                vals.Push({ path: newPath, val: x[key] });
            }
            vals.forEach(function (obj) {
                return result.Push(obj);
            });
        });

        return result;
    } // flattenObj

    // start with  flattening `obj`
    var parts = flattenObj(obj); // [ { path: [ ...parts ], val: ... }, ... ]

    // convert to array notation:
    parts = parts.map(function (varInfo) {
        if (varInfo.path.length == 1) varInfo.path = varInfo.path[0];else {
            var first = varInfo.path[0];
            var rest = varInfo.path.slice(1);
            varInfo.path = first + '[' + rest.join('][') + ']';
        }
        return varInfo;
    }); // parts.map

    // join the parts to a query-string url-component
    var queryString = parts.map(function (varInfo) {
        return varInfo.path + '=' + varInfo.val;
    }).join('&');
    if (urlEncode) return encodeURIComponent(queryString);else return queryString;
}

Utilisez comme:

console.log(toQueryString({
    prop1: 'x',
    prop2: {
        y: 1,
        z: 2
    }
}, false));

Quelles sorties:

prop1=x&prop2[y]=1&prop2[z]=2
15
Jrop

Une autre version:

function toQueryString(obj) {
    return Object.keys(obj).map(k => {
      return encodeURIComponent(k) + "=" + encodeURIComponent(obj[k])
    })
    .join("&");
}
4
blablabla

JavaScript général:

function toParam(obj) {
  var str = "";
  var seperator = "";
  for (key in obj) {
    str += seperator;
    str += enncodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
    seperator = "&";
  }
  return str;
}


toParam({ cost: 12345, insertBy: 'testUser' })
"cost=12345&insertBy=testUser"
4
Jim Blackler
var myObj = { cost: 12345, insertBy: 'testUser' },
    param = '',
    url   = 'http://mysite.com/mypage.php';    

for (var p in myObj) {
  if (myObj.hasOwnProperty(p)) {
    param += encodeURIComponent(p) + "=" + encodeURIComponent(myObj[p]) + "&";
  }
}

window.location.href = url + "?" + param;
3
mVChr

vous pouvez l'utiliser

function serialize(obj)
{
    let str = []

    for(var p in obj)
    {
      if(obj.hasOwnProperty(p)) str.Push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
    }

    return str.join('&')
}

essayez sur JSFiddle sur ce lien https://jsfiddle.net/yussan/kwmnkca6/

1
yussan

Version ES6 de réponse de Jrop (analyse également les paramètres imbriqués)

const toQueryString = (obj, urlEncode = false) => {
  if (!obj) return null;
  const flattenObj = (x, path = []) => {
    const result = [];
    Object.keys(x).forEach((key) => {
      if (!Object.prototype.hasOwnProperty.call(x, key)) return;
      const newPath = path.slice();
      newPath.Push(key);
      let vals = [];
      if (typeof x[key] === 'object') {
        vals = flattenObj(x[key], newPath);
      } else {
        vals.Push({ path: newPath, val: x[key] });
      }
      vals.forEach((v) => {
        return result.Push(v);
      });
    });
    return result;
  };

  let parts = flattenObj(obj);
  parts = parts.map((varInfo) => {
    if (varInfo.path.length === 1) {
      varInfo.path = varInfo.path[0]; // eslint-disable-line no-param-reassign
    } else {
      const first = varInfo.path[0];
      const rest = varInfo.path.slice(1);
      varInfo.path = `${first}[${rest.join('][')}]`; // eslint-disable-line no-param-reassign
    }
    return varInfo;
  });

  const queryString = parts.map((varInfo) => {
    return `${varInfo.path}=${varInfo.val}`;
  }).join('&');
  if (urlEncode) {
    return encodeURIComponent(queryString);
  }
  return queryString;
};
1
Mythical Fish