Error: JSON key data not present in rendering

Question

Error: JSON key data not present in rendering

Here is a JSON string I am working with:

{"{\"nodeName\":\"abc\"}":[{"url":"abc","status":true},{"url":"abc","status":true}],"      {\"nodeName\":\"pqr\"}":[{"url":"abc","status":true},{"url":"abc","status":true}]}

Although I can retrieve the value(v) using the code below, I'm struggling to get the key(k). Upon alerting, I receive (undefined abc true). The value of k remains undefined.

 $.each(obj, function() {
      $.each(this, function(k, v) {
    alert(k.nodeName +" "+ v.url +" "+v.status);
     });
    });

I require the value of (k) for further validation. I have already validated the JSON string to ensure its validity, so what could I be missing here? Is there another approach I should consider? Your assistance would be greatly appreciated...

Furthermore, the JSON object being passed from the server end is structured as follows:

json.put(js.toString(),jsarray)

where

json = json OBject,
js = json Object,
jsarray = json Array.

javascript json

Answer 1

Answer №1

It is important to note that keys are always in string format. In this particular scenario, the key seems to contain JSON within itself. To access the data properly, you will need to parse the JSON and convert it into an object first. For guidance on how to correctly parse JSON in JavaScript, refer to this resource.

However, I must point out that this data structure appears quite convoluted and confusing. It would be more practical to use the node name directly as the key in your JSON. In other words, your JSON structure should resemble something like

{"abc": [...], "pgr": [...], ...}

.

By structuring your JSON in this way, you can easily access the data using the following method:

$.each(obj, function(key, arr) {
    $.each(arr, function(_, v) {
        alert(key +" "+ v.url +" "+v.status);
    });
});

Answer 2

It is important to note that keys are always in string format. In this particular scenario, the key seems to contain JSON within itself. To access the data properly, you will need to parse the JSON and convert it into an object first. For guidance on how to correctly parse JSON in JavaScript, refer to this resource.

However, I must point out that this data structure appears quite convoluted and confusing. It would be more practical to use the node name directly as the key in your JSON. In other words, your JSON structure should resemble something like

{"abc": [...], "pgr": [...], ...}

.

By structuring your JSON in this way, you can easily access the data using the following method:

$.each(obj, function(key, arr) {
    $.each(arr, function(_, v) {
        alert(key +" "+ v.url +" "+v.status);
    });
});

Error: JSON key data not present in rendering

Answer №1

Similar questions

Is your Ajax jQuery live search not functioning properly with JSON data?

Unable to view the HTML division

Discovering the most efficient route on a looped set of items

Adjust the value before moving to the next tab, or if you choose to leave the

Updating the ngModel within a directive using another directive

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Searching through the use of autocomplete with alternative parameters

Adding individual names for elements in a list using Jackson

Is it feasible to transmit telemetry through a Web API when utilizing ApplicationInsights-JS from a client with no internet connectivity?

How can we include identical item names within a single JavaScript object?

What is the best way to add a background image to a div using react?

The split function of a string displays an undefined result

Regular expression pattern for consistently capitalizing the phrases "CA" and "USA" in an address string

When navigating to '/blogs/', the index.js file in Next.js will automatically open

Transforming a string in AngularJS to a "controller as" approach using $parse

How can I add content using HTML or JavaScript?

Show the HTML that is received as JSON when making an AJAX request

Creating a sliding menu using React and Headless UI (with Tailwind CSS)

Maintaining the order of the sort in the .json file generated from the API response

Reactjs encountering issues loading css file