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

Posted 2023-02-22

【中文标题】Vue - 将 JSON 对象转换为具有特定布局的字符串

【英文标题】：Vue - Convert JSON object to a string with specific layout

【发布时间】：2019-11-04 08:36:53

【问题描述】：

我有一个动态设置的 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 文件中处理？

【参考方案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);

【讨论】：

好答案....reduce((map, obj, i) => (map[i+1] = obj, map), ) 以保持 OP 想要的方式如何？无论哪种方式，这个答案都很好。