从 js Map 和 String 创建 json 字符串

Question

我的 REST 控制器需要以下格式的请求输入，它成功地将其转换为包含 Map 和 String 作为参数的 Java 对象：

{ 
"myMap" : { 
    "key1": "value1", 
    "key2": "value2", 
    "key3": "value3"},
"myString": "string value"
}

我从 html 表单中获取数据，如下所示：

var myMap = new Map();
var String = document.getElementById('String').value;
for (var i = 0 ; i<anArray.length ; i++){
    var input = document.getElementsByClassName('input_' + (i+1));
    for (var j = 0 ; j<3 ; j++){
        if (input[j].checked){
            myMap.set(input[j].name, input[j].id);
        }
    }
}

基本上，这段代码归结为：

var myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

这会产生一个包含 {key1 => value1, key2 => value2, etc} 和一个字符串的映射。我一直在尝试将它变成这样的 json 字符串，但它似乎不起作用：

var myJson = {};
myJson.myMap = myMap;
myJson.myString = myString;
var json = JSON.stringify(myJson);

但是，我最终得到以下字符串： `{"myMap":{},"String":"myString"}' 。所以我可能不得不做一些不同的事情来对地图进行字符串化，但我尝试的任何方法都不起作用。

谁能帮帮我？

Answer 1

使用 ES6 语法，特别是如果您有嵌套映射（否则Idan Dagan's answer 更简单），您可以使用 JSON.stringify() 的 second 参数，reducer，如下：

JSON.stringify(myMap, (key, value) => (value instanceof Map ? [...value] : value));

Answer 2

这个 hack 可以完成这项工作（但它是全局覆盖，必须小心使用）：

  Map.prototype.toString = function() {

    let result = {};

    this.forEach((key, value) => { result[key] = value;});

    return JSON.stringify(result);
  };

Answer 3

您可以使用Array.prototype.reduce 和扩展符号将您的地图简洁地转换为您需要的格式。

var myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");
var myString = "string value";

function mapToObj (map) {
  return [...map].reduce((acc, val) => {
    acc[val[0]] = val[1];
    return acc;
  }, {});
}

const json = JSON.stringify({
  myMap: mapToObj(myMap),
  myString: myString
});

console.log(json);

Answer 4

您可以编写一个简短的转换函数，将地图变成可以字符串化的对象。

console.clear()

function mapToObj(map){
  const obj = {}
  for (let [k,v] of map)
    obj[k] = v
  return obj
}

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

const myString = "string value"

const myJson = {};
myJson.myMap = mapToObj(myMap);
myJson.myString = myString;
const json = JSON.stringify(myJson);

console.log(json)

这是一个可能适用于存在 Map 但其他一些 ES6 构造不适用的版本（不过，这似乎是编辑器设置问题）。

console.clear()

function mapToObj(map){
  var obj = {}
  map.forEach(function(v, k){
    obj[k] = v
  })
  return obj
}

var myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

var myString = "string value"

var myJson = {};
myJson.myMap = mapToObj(myMap);
myJson.myString = myString;
var json = JSON.stringify(myJson);

console.log(json)

Answer 5

JSON 字符串化具有对象、数组和函数的特殊行为。

例如：

JSON.stringify( function(){} ); // output: undefind
JSON.stringify( [2,undefined,function(){}, 5] ); //output: "[2,null,null,5]"

解决这个问题的一种方法是定义一个 toJSON() 方法返回对象的 JSON 安全版本。

var myJson = {};
myJson.toJson = function() {
    return {  /* what ever you need*/}
}

第二个，也更简单，使用 ES6 语法：

JSON.stringify([...myMap]);

Answer 6

您可以按如下方式初始化 myMap，而不是 Map

myMap = {};

将其中的元素设置为 -

if (input[j].checked){
        myMap[input[j].name] = input[j].id;
}

最后，在转换时，您可以执行以下操作 -

myJSON = {};
myJSON.myMap = JSON.stringify(myMap);
myJSON.myString = "StringValue";
var json = JSON.stringify(myJSON);