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);