Привет, в php ложу массив $data_attributes в атрибут data-additional-color-data одного

Question

Привет, в php ложу массив $data_attributes в атрибут data-additional-color-data одного

html элемента:
$data_attributes = [
      312 => [
        'name' => 'Black',
        'hex' => '#000000',
        'src' => 'http://sitename/files/pms_colors/Black.png'
      ],
      313 => [
        'name' => 'Metallic',
        'hex' => '#D3D4DE',
        'src' => 'http://sitename/files/pms_colors/Metallic.png'
      ]
    ];

$entity_form['field_pms_colors']['#attributes']['data-additional-color-data'] = Json::encode($data_attributes);
И вижу в в dev tools браузера что в разметке элемент выглядит так:
<div class="field--name-field-pms-colors" data-additional-color-data="{"312":{"name":"Black","hex":"#000000","src":"http:\/\/threadbird.docker.localhost\/sites\/default\/files\/pms_colors\/Black.png"},"313":{"name":"Metallic Silver","hex":"#D3D4DE","src":"http:\/\/threadbird.docker.localhost\/sites\/default\/files\/pms_colors\/Metallic%20Silver.png"}}"></div>
Как мне теперь в js файле сделать чтобы данные из атрибута были в массиве в примерно таком же виде (нормальном без этих всяких " и других символов) для манипуляции с этими данными?