Vue - 将 JSON 对象转换为具有特定布局的字符串

Question

我有一个动态设置的 JSON 对象。下面是设置列的方法onDragStop：

data() {
 return {
   columns: [],
 }
},

methods: {
   onDragStop: function (index) {
    this.$set(this.columns, index, {
        xAxis: this.left,
        position: ((this.left/SomeWidth) * 100),
    });
 }

}

例如，上面将创建一个如下所示的 JSON 对象（用于 2 列）：

[{"xAxis":329.2921875,"position":"30"},{"xAxis":658.584375,"position":"60"}]

现在，我需要将此 JSON 对象传递给后端 PHP 文件，该文件需要如下布局：

"{"1": {"position": "30"}, "2": {"position": "60"}}"

PHP 文件只是对 JSON 进行编码：

$columns = json_encode($request->columns);

现在我正在尝试通过以下方法将 JSON 字符串转换为所需的输出：

UpdateColumns: function (columns) {
    this.columns = JSON.stringify(columns)
}

但是上面的转换是这样的：

"{"columns":[{"xAxis":340,"position":"30.98"},{"xAxis":658.584375,"position":"60"}]}"

我想知道，是否可以将 JSON 对象转换为我想要的输出？这应该在 Vue 文件中完成 - 还是应该在后端 PHP 文件中处理？

Answer 1

试试这个：

const data =[{"xAxis":329.2921875,"position":"30"},{"xAxis":658.584375,"position":"60"}];
const result = data.map(res=>({position: res.position}))
 .reduce((map, obj, i) => (map[i] = obj, map), {})
console.log(result);