Почему php json_encode() и js JSON.parse() не дружат и как их помирить?

Question

[Islam Ibakaev]

Работаю над проектом laravel + vue, пытаюсь во vue кинуть данные из базы данных через шаблон, типа так

@extends('layouts.app')
@section('content')
    <group-task :task="'{{ json_encode( $task ) }}'"></group-task>
@endsection

В компоненте пытаюсь передать данных вниз к дочерним через свойство homeTask (релевантный кусок компонента)

<template>
<div>
    <TrainerTaskNew :homeTask="JSON.parse(task)" v-if="task.trainer='Ментальный счёт'"></TrainerTaskNew>
    <RombTrainerNew :homeTask="JSON.parse(task)" v-else></RombTrainerNew>
</div>
</template>

В-общем json_encode() передал мне такую строку

'{"id":6,"trainer":"Флеш-карты","level":"-1 = -10+9","req_formulas":"["-2 = -5+3","-4 = -5+1"]","minmax":"от 1 до 9","quantity":20,"nums":4,"subtraction":1,"group_id":1,"created_at":"2019-05-07 19:43:35","updated_at":"2019-05-07 19:43:35"}'

JSON.parse() не может справиться с этой строкой, выдаёт ошибку. Подскажите решение проблемы.

Comments

[JhaoDa]

Ошибку нам самим угадывать или ты соизволишь добавить её в вопрос?

[Арслан Исаев]

Проверяй виладатором json, например: https://jsonlint.com. У тебя json не правильно сформирован вот и js не понимает.

Answer 1

[Immortal_pony]

Вот так делать нельзя потому что при вставке в html закодированные каавычки преобразовываются обратно.

<group-task :task="'{{ json_encode( $task ) }}'"></group-task>

Вот такое кодирование безопасно:

<group-task :task="'{{ urlencode(json_encode( $task )) }}'"></group-task>

И на клиенте соответственно:
JSON.parse(decodeURIComponent(serialized))

Comments

[ThunderCat]

И на клиенте соответственно:
decodeURIComponent(JSON.parse(serialized))

а разве не наоборот?

[Immortal_pony]

ThunderCat, верно, поправил

[Islam Ibakaev]

спасибо, мне помогла функция rawurlencode()

Answer 2

[Roman K]