如何在 Angularjs 中将嵌套对象转换为查询字符串

Question

我要转换这个对象：

$scope.foo =  {
    bar: {
        baz: 'foobarbaz'
    }
}

到

foo[bar][baz]=foobarbaz

查询字符串。

还有怎么转换

$scope.fields = ['id', 'name', 'created_at']

到

fields[]=id&fields[]=name&fields[]=created_at`

Angularjs 中是否有任何库或函数可以完成这项工作？

Answer 1

看看这个

function toPhpQuery(obj) {
  return Object.keys(obj).map(key => {
    var val = obj[key];
    var prefix = encodeURIComponent(key);
    return Array.isArray(val) 
      ? _toPhpQueryArray(val, prefix)
      : _toPhpQueryObject(val, prefix);
  }).join("&");
  
  function _toPhpQueryArray(arr, prefix) {
    return arr.map(v => prefix + "[]=" + encodeURIComponent(v)).join("&");
  }

  function _toPhpQueryObject(value, prefix) {
    if (typeof value === "object" && value) {
      return Object.keys(value).map(k => _toPhpQueryObject(value[k], prefix + "[" + encodeURIComponent(k) + "]")).join("&");
    } else {
      return prefix + "=" + encodeURIComponent(value);
    }
  }
}


console.log(toPhpQuery({
  foo: {
    bar: {
      baz: 'foobarbaz'
    }
  },
  fields: ['id', 'name', 'created_at']
}));

Answer 2

无需自己编写那些序列化器，Angular 已经为您内置了一个。暗示注入 $httpParamSerializerJQLike 服务并使用它：

$scope.foo = {
  foo: {
    bar: {
      baz: 'foobarbaz'
    }
  }
};

$scope.fields = {
  fields: ['id', 'name', 'created_at']
};

console.log( $httpParamSerializerJQLike($scope.foo) );
// => "foo[bar][baz]=foobarbaz"

console.log( $httpParamSerializerJQLike($scope.fields) );
// => "fields[]=id&fields[]=name&fields[]=created_at"

// (output shown URL-decoded)

如何在 Angularjs 中将嵌套对象转换为查询字符串

How to convert nested object to query string in Angularjs

arrays

nested

query-string

angularjs