具有数组逗号分隔 Javascript 的 JSON 解析器答案

【问题标题】：JSON parser with Array Comma Separated Javascript具有数组逗号分隔 Javascript 的 JSON 解析器
【发布时间】：2016-12-29 17:52:06
【问题描述】：

我有一个如下所示的 JSON 结构。

"content" : {
    "state" : {
      "Idle" : [
        [
          78.366666667,
          1436955825
        ],
        [
          71.281111111,
          1436955840
        ],
        [
          70.41,
          1436955855
        ],
        [
          74.283333333,
          1436955870
        ],
        [
          76.411111111,
          1436955885
        ]
       ] 
        } }

我要做的是解析这个值。我必须将逗号分隔值分成 x 和 y。我必须解析这些值并将它们分开。我在解析它们时遇到问题

应该是这样的

 "Idle" : [
            {
              "x" : 78.366666667,
              "y" :1436955825
            },
            {
              "x" :71.281111111,
              "y" :1436955840
            },
            {
              "x" :70.41,
              "y" :1436955855
            },
            {
              "x" :74.283333333,
              "y" :1436955870
            },
            {
              "x" :76.411111111,
              "y" :1436955885
            }
           ]

【问题讨论】：

Json 很容易被 Javascript 理解。您可以获得一个普通的 javascript 对象，然后根据需要对其进行转换。您面临的问题是什么？你已经尝试过什么？
任何代码来显示你的解析尝试？
你不认为第二个无效。它应该在{}。
@Jai - 这会使它无效
所以你有 JSON 字符串或普通对象？

标签： javascript jquery arrays json html

【解决方案1】：

将...Idle 元素映射到对象（有关Array.map，请参阅MDN）：

test = {
  content: { 
   state: {
     Idle: [
        [
          78.366666667,
          1436955825
        ],
        [
          71.281111111,
          1436955840
        ],
        [
          70.41,
          1436955855
        ],
        [
          74.283333333,
          1436955870
        ],
        [
          76.411111111,
          1436955885
        ]
       ]
   } 
  } 
};


test.content.state.Idle = test.content.state.Idle.map(
                            function (v) {
                              return { x: v[0], y: v[1] };
                            }
                           );

document.querySelector("#result").textContent = JSON.stringify(test, null, " ");

&lt;pre id="result"&gt;&lt;/pre&gt;

【讨论】：

撇开缩进偏好，这是最好的方法。 +1：P

【解决方案2】：

var container = {
    "content": {
        "state": {
            "Idle": [
                [
                    78.366666667,
                    1436955825
                ],
                [
                    71.281111111,
                    1436955840
                ],
                [
                    70.41,
                    1436955855
                ],
                [
                    74.283333333,
                    1436955870
                ],
                [
                    76.411111111,
                    1436955885
                ]
            ]
        }
    }
};

var _oldIdle = container.content.state.Idle,
    _newIdle = [];

for (var i = 0; i < _oldIdle.length; i++) {
    _newIdle.push({
        x: _oldIdle[i][0],
        y: _oldIdle[i][1]
    });
}

container.content.state.Idle = _newIdle;

【讨论】：

【解决方案3】：

试试这个方法：

var json = {
  "content": {
    "state": {
      "Idle": [
        [
          78.366666667,
          1436955825
        ],
        [
          71.281111111,
          1436955840
        ],
        [
          70.41,
          1436955855
        ],
        [
          74.283333333,
          1436955870
        ],
        [
          76.411111111,
          1436955885
        ]
      ]
    }
  }
};

var newObj = {},
  arr = [];

$.each(json.content.state.Idle, function(i, item) {
  arr.push({x: item[0], y: item[1]});
});
newObj.idle = arr;
console.log(newObj);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

arr.push({ x: item[0], y: item[1] });。不要过于复杂。
谢谢@Cerbrus 没有那样想。再次感谢。

【解决方案4】：

如果你有 JSON 字符串，你可以使用 JSON.parse 和 reviver function

var json = '{"content":{"state":{"Idle":[[78.366666667,1436955825],[71.281111111,1436955840],[70.41,1436955855],[74.283333333,1436955870],[76.411111111,1436955885]]}}}';
var result = JSON.parse(json, function(k, v) {
  if ((v instanceof Array) && (isFinite(Number(k)))) {
    //if array with coordinates - return object instead
    return {
      x: v[0],
      y: v[1]
    };
  }
  return v;
})
console.log(result);
document.getElementById('r').innerHTML = JSON.stringify(result,null,2)

&lt;pre id='r'&gt;&lt;/pre&gt;

【讨论】：

【解决方案5】：

UnderscoreJS 很简单：

JSFiddle

var values = {
    "content": {
        "state": {
            "Idle": [
                [
                78.366666667,
                1436955825],
                [
                71.281111111,
                1436955840],
                [
                70.41,
                1436955855],
                [
                74.283333333,
                1436955870],
                [
                76.411111111,
                1436955885]
            ]
        }
    }
};

var newValues = _.map(values.content.state.Idle, function (value, key) {
    return {x: value[0], y: value[1]};
});

console.log(newValues);

【讨论】：

您不需要库来映射数组。
我没有说你需要它，我只是给出了正确的答案。不是最好的吗？嗯，我可以同意，但这是正确的。否决票不正确恕我直言。
@Michelem 很好，可以使用纯 js 完成，所以为什么还要使用 lib。
投反对票工具提示：“这个答案没用。” 我认为这个答案没用，因为它需要用户加载一个库来获取同样容易的东西在原生 JS 中完成。此外，用户可以根据自己的意愿投票。我不必解释我的反对意见......
我将这些值用于人力车图的 x 和 y。但问题是人力车无法正常工作，因为 x 中有双引号。