JSON数据响应位置不正确

Question

我有一个函数来从服务器调用API,如下所示:

 getDataSet(callback) {
            request.open('POST', `${apiPath}`);
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            request.onreadystatechange = function () {
                if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
                    return callback(null, JSON.parse(request.responseText));
                }
            };
            request.send();
        }

 dataSetDetail.getDataSet((err, response) => {
        if (err) return (console.log(err));
        if (response.success) {
            let data = response.data.dataSetDetails.slice(0, 10);
        }
    });

这是服务器端:

router.post('/:projectid/data/:id', isAuthenticated, (req, res, next) => {
    let dataSetId = parseInt(req.params.id);
    dataSet.getDataSet(dataSetId)
        .then(dataSet => {
            if (!lodash.isNull(dataSet)) {
                res.setHeader('Content-Type', 'application/json');
                return res.json({
                    data: dataSet,
                    success: true,
                });

            } else {
                logger.error('Cannot find data set with id: ' + dataSetId);
                res.redirect('../data');
            }
        })
        .catch(e => {
            logger.error(e);
            res.redirect('../data');
        })

});

服务器的响应是:

[
  {
    "left": "2",
    "right": "3",
    "operator": "+"
  },
  {
    "left": "6",
     "right": "4"
    "operator": "-"
  }
]

但在客户端我收到的结果有时像服务器端,有时如下:

[
      {
        "operator": "+",
        "right": "3",
        "left": "2",

      },
      {
        "operator": "-",
        "right": "4",
        "left": "6"
      }
    ]

因为我需要在UI上显示正确的数据位置.请给我建议

Answer 1

有两种选择:

1.使用数组

JSON对象表示法没有顺序.来自http://json.org:

一个对象是一个无序集合的名称/值对.

(我的重点.)

尽管JavaScript对象现在有订单(从ES2015开始),但使用它通常不是最佳实践.

如果您需要订单,特别是如果您需要通过JSON保留订单,请使用数组:

[
    ["2", "3", "+"],
    ["6", "4", "-"]
]

如果您需要属性名称,也可以发送它们:

{
    names: ["left", "right", "operator"],
    data:  [
        ["2", "3", "+"],
        ["6", "4", "-"]
    ]
}

我强烈建议选择2.

2.确保dataSet按正确顺序创建

如果您已经设置了使用对象并依赖于属性顺序(不推荐),并且您在两端都使用JavaScript(就像您看到的那样),并且您的属性dataSet是"自己的"属性(不是继承的)并且它们没有整数索引名称(您的示例不具有),然后:

确保dataSet按照希望序列化属性的顺序创建对象,例如:

const dataSet = [];
dataSet.push({
    left: "2",
    right: "3",
    operator: "+"
});

要么

const dataSet = [];
let entry = {};
entry.left = "2";
entry.right = "3";
entry.operator = "+";
dataSet.push(entry);
// ...

不

const dataSet = [];
let entry = {};
entry.operator = "+";  // *** These are
entry.right = "3";     // *** in the
entry.left = "2";      // *** wrong order
dataSet.push(entry);
// ...

不要使用for-in或Object.keys,他们没有指定遵循财产秩序.如果您需要按顺序使用一组属性名称,请使用Object.getOwnPropertyNames.

属性将按您想要的顺序,JSON.stringify指定遵循该顺序,并JSON.parse指定在结果中按顺序创建对象.因此,即使JSON不保证顺序,JavaScript JSON.stringify也JSON.parse可以在非常有限的环境中完成.

此外,虽然:不推荐使用.

但在客户端,我收到的结果有时像服务器端,有时像下面

服务器发送的内容更可能发生变化(可能基于代码中的分支),而您只需查看具有所需顺序的内容即可.如果服务器发送您显示的JSON,JSON.parse将保留该顺序(请参阅上面的原因).