Using Unicode JSON in Laravel blade to pass data to React components, encountering an issue with JSON parsing

I currently have a JSON object stored in the database:

{
"ui": {},
"title": "Hola mundo 2",
"values": {},
"properties": {},
"description": "descripcion"
}

Within the Laravel controller, I retrieve this data and pass it to the view:

$surveyData = Empresa::find($empresa_id)->survey;    
return view('surveys.edit')->with('surveyData', json_encode($surveyData));

In the Laravel Blade template, I embed the data within a div tag:

<div id="poll" data-survey=@json($surveyData)></div>

Upon accessing the data in React, I store it in the 'oldData' variable:

const oldData = document.querySelector("#poll").dataset.survey

The issue arises when trying to parse the JSON data in React due to the unicode format used in the Laravel view DOM:

<div id="poll" data-survey="\u0022{\\\u0022ui\\\u0022: {}, \\\u0022title\\\u0022: \\\u0022Hola mundo 2\\\u0022, \\\u0022values\\\u0022: {}, \\\u0022properties\\\u0022: {}, \\\u0022description\\\u0022: \\\u0022descripcion\\\u0022}\u0022"></div>

Attempting to use JSON.parse on 'oldData' results in an error:

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

I am uncertain about the source of the error and unsure of how to proceed.

Answer №1

It appears that you may be encoding your JSON data twice: json_encode($surveyData) and then @json($surveyData) Make the following adjustment:

update view('surveys.edit')->with('surveyData', json_encode($surveyData));

to

modify view('surveys.edit')->with('surveyData', $surveyData);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The original items are not utilized by jquery-ui autocomplete

I currently have the following setup: class Team { constructor(data) { this.id = data && data.id || null this._title = data && data.title || null } get title() { return this._title } set title(v) { this ...

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

Typedoc Error: Attempted to assign a value to an undefined option (mode)

After installing typedoc with the command npm install typedoc --save-dev, I proceeded to add typedocOptions to tsconfig.json: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", // ...some lin ...

How to horizontally align Material-UI elements in ReactJS

My goal is to create a user-friendly form where respondents can input answers to questions and select one as the preferred option by using a radio button. However, I'm facing an issue where Material-UI displays each element on its own line. This is t ...

Hospitals that utilize this technique are nonexistent

Currently, I am working on a project that involves establishing a many-to-many relationship between two tables. In my model class, I have created a method to handle this relationship. However, whenever I try to invoke this method from my controller, it thr ...

The utilization of CakePHP buttons for submitting forms, along with the seamless integration of

<?php echo $this->Form->button('A Button'); echo $this->Form->button('Another Button', array('type'=>'button')); echo $this->Form->button('Reset the Form', array('type'=> ...

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

ng-repeat did not properly listen for changes in the radio box selection

Feeling a bit confused here. I'm trying to call a function on change and pass the obj to it. From what I understand, since it's bound to the selected obj, I should be able to just use ng-model. However, in this situation, nothing happens when I s ...

What is the method for altering the look of a button using JavaScript?

As a beginner in web development, I have a question. Typically, I know how to style the submit button when it's created in the HTML page using CSS. However, I'm wondering if it's possible to apply CSS styling to the JavaScript block instead. ...

What is the method for including an item in a Dictionary?

I encountered an issue with a nested dictionary in a Json file. Here is the current content of the file (highscore_history.txt): { "Highscores": { "0highscore": 2 } } My goal is to add a new entry into the nested dictio ...

Activate modifications in a distinct column?

I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

To achieve a text color that contrasts well with any background, I need to make sure it's either black or white. The background in my app can vary in color and format, so finding the perfect solution has been challenging. Using mix-blend-mode doesn&a ...

What is the best way to ensure the image and card maintain the same size ratio in React Bootstrap?

One of the challenges I encountered involved a vertically aligned card group containing a card with an image: https://i.stack.imgur.com/w9Jkf.jpg This is the React code snippet that was causing the issue: import React from 'react'; import { ...

Generate dynamic thumbnails for every object using React

Hey there! I'm currently working on creating a div for each thumbnail in my personas ={[]}. I want to use this.props.personas.map to achieve this. Here's what I have so far: {this.props.personas.map(thumbnail => { return <div>< ...

Cypress - Locate and interact with a button containing specific text

Utilizing material-ui as my go-to css framework, I'm seeking to target a button that includes specific text. Here is my current code: cy.get('button').contains('Edit Claim').should('be.disabled'); The issue arises becaus ...

What is the best way to send information from a main blade to an included modal?

Trying to implement a functionality where a modal is triggered on clicking a button and an array named $incident is passed through to the properties of a Vue component. What is the correct way to pass data from a parent blade to an included modal? I initia ...

Can you explain the meaning of this AJAX code snippet?

I've been researching online for information, but I'm struggling to find any details about the AJAX code snippet that I'm using: function getEmployeeFilterOptions(){ var opts = []; $checkboxes.each(function(){ if(this.checke ...

Leveraging AngularJS and ng-map to incorporate interactive dynamic heatmap displays

Greetings everyone! I am completely new to frontend development and have embarked on my first journey with AngularJS. I must admit, it's quite challenging and I'm still trying to wrap my head around how it all works. Currently, I'm working o ...

Finding the Earliest and Latest Date in Material UI DatePicker Component within a React Application

I am facing an issue with date selection based on the 'access' value in my code. When the 'access' value is 1, there should be no restrictions on selecting dates. However, when the value of 'access' is not 1, users should only ...

JS issue: Having trouble accessing the array values despite the array being present

I am working on an ajax call where I save the success data in an array. However, when I try to access that data outside of the ajax function and use console to log my array, it appears as expected. Here is a glimpse at what I see on the screen: https://i ...