Why is my JSON parse function returning an empty string?

Not sure if the issue lies with VueJS or JS itself.

Within my database, I have a string (converted from a JS Object using JSON.stringify()) that appears as follows:

{"type":5,"values":{"7":"/data/images/structured-content/64-7-scico.jpg","8":"<b>wefwe</b>","9":"Nějaký text","10":"/data/images/structured-content/64-10-scico.jpg"}}

The goal is to retrieve this string from the database (using Axios), convert it back into a JS object, and assign it to the data in VueJS:

.then(response => {

            if (response.data.response === "ok" && response.status == 200) {

                // get data
                let data = response.data.data.data[0];

                // pass name to state
                this.objectName = data.name;

                // get json in string format
                let result = data.content;

                // first log
                console.log(result);

                // convert string to json
                let content = JSON.parse( result );

                // second log
                console.log( content.values );

                // update states
                this.IDType = content.type;
                this.values = content.values;


            }

        })

Axios, data.name, and content.type are functioning properly. However, the second log (content.values) seems to be returning an observer with empty strings, preventing me from passing them to Vue data effectively. The values within this object remain consistently empty, as depicted below on the screen image. What could be causing this issue? Appreciate your insights!

Debugger output:

Answer №1

In order for Vue to be reactive, it requires prior knowledge of the keys within an object before they are assigned. If the keys are already known, it is advisable to pre-assign them like this:

data : () => ({
  values : {
     7 : "",
     8 : "",
     9 : "",
     10 : ""
  }
}),

You can then utilize Object.assign to set these values:

Object.assign(this.values, content.values)

For cases where the keys are unknown or dynamic, you can make them reactive by using the $set method:

Object.keys(content.values).forEach(
  function(key){
     this.$set(this.value, key, content.values[key])
  }
)

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

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

Using Node.js for a game loop provides a more accurate alternative to setInterval

In my current setup, I have a multiplayer game that utilizes sockets for asynchronous data transfer. The game features a game loop that should tick every 500ms to handle player updates such as position and appearance. var self = this; this.gameLoop = se ...

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

I've always wondered why setting a certain object's key as its own value in a loop results in undefined. Take this code block, for example: var text = 'this is my example text', obj = {}, words = text.split(' '); for (i = ...

Tips on saving every query outcome in a separate array and delivering it back to the controller upon completion

I am currently facing an issue where I receive data in a function from my controller, and inside my model function, I need to retrieve results using a query with a dynamic value of channel. The channel ID will be coming from each checkbox on my HTML view ...

I have been seeking the perfect solution to seamlessly incorporate ckeditor5 with comments in my AngularJS applications. Despite extensive research, I have not come across any angularjs-specific plugins for this purpose. It

import Comments from '@ckeditor/ckeditor5-comments/src/comments'; ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, Image, Comments ]; I am trying to figure out how to incorporate comments into the CKEditor5 in an AngularJS ...

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

I'm encountering an issue with updating the gridview TypeError: $.fn.yiiGridView is undefined; after using AjaxLink Click Button for Refresh <script> $(document).ready(function(){ $("#tombol_refresh").click(function(){ $.fn.yiiGridView ...

What is the best way to showcase Vue data of a selected element from a v-for loop in a

Here is an example of how my json data is structured. I have multiple elements being displayed in a v-for loop, and when one is clicked, I want to show specific information from that element in a modal. [{ "id": 1, "companyNa ...

How can I update the background color of the specified element when the text changes without triggering a postback?

Seeking guidance on JavaScript as I am not very adept in it. We have a webpage where users upload .XLS/.CSV files and review the data before submitting it to our database. Users can edit cells in the uploaded document on our "review" screen before final su ...

I have to make sure not to input any letters on my digipas device

There is a slight issue I am facing. Whenever I input a new transfer of 269 euros with the bank account number BE072750044-35066, a confirmation code is required. The code to be entered is 350269. https://i.stack.imgur.com/YVkPc.png The digits 350 corres ...

Identify the significance within an array and employ the filter function to conceal the selected elements

I'm in the process of filtering a list of results. To do this, I have set up a ul list to display the results and checkboxes for selecting filter options. Each item in the ul list has associated data attributes. When a checkbox with value="4711" is c ...

Clicking on ng-click can lead to the dissociation of the Angular factory

My situation involves a factory with a series of prototypes that need to call each other. The issue arises when the reference to "this" is mistakenly applied to the html template instead of the original factory class when using ng-click. For example: ang ...

Setting the second tab as the primary active tab

I am currently working on a script that is well-known, and everything is functioning perfectly. However, I want to change it so that when the page is first opened, it displays the second tab instead of the first one (the first tab being a mail compose tab ...

The React setState function isn't updating the state as expected when used within the useEffect hook

I'm new to using hooks and I'm facing an issue with setState when trying to update data received from an API. Despite logging the response data successfully, it seems that the state does not update as expected. My useEffect function is set to run ...

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

After experimenting with Vue's defineCustomElement() to develop a custom element, I encountered an issue where the child component styles were not being included in the shadow root for some unknown reason. To address this problem, I took a different ...

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

Why is there a false positive in the onChange event for the number type in React TypeScript?

I encountered an error on line 24 Argument of type 'string' is not assignable to parameter of type 'SetStateAction'.ts(2345) This issue occurred while working with TypeScript for a React experiment. const App: React.FC = () => ...

Stop underscore templates from accessing global variables

I have a question about my underscore template. Here is the section of code in question: <% if (typeof title !== "undefined") { %> <p class="title"><%= title %></p> <% } %> Is there a way to avoid using the global scope ...

Steps for extracting URL parameters from AWS API Gateway and passing them to a lambda function

After successfully setting up my API gateway and connecting it to my lambda function, I specified the URL as {id} with the intention of passing this parameter into the lambda. Despite numerous attempts using both the default template and a custom one for ...

What is the process for creating a line using points in three.js?

Can anyone provide a solution for creating a straight line using new THREE.Points()? I attempted to place particles and set their positions with an array and for loop, but the spacing was inconsistent. ...