Decoding JSON data with JavaScript

Question

Decoding JSON data with JavaScript

My JavaScript code is giving me trouble. I am using an ajax method that returns a JSON string like this:

{
  "ObjectResponse": {
    "Operation": "OK",
    "Response": "SUCCESS",
    "Message": "List of AAA Found",
    "List": [
      {
        "keySource": "gat\/images\/images_set\/apple.jpg",
        "idSiteKey": "1",
        "text": "Apple"
      },
      {
        "keySource": "gat\/images\/images_set\/cat.jpg",
        "idSiteKey": "2",
        "text": "Cat"
      },
      {
        "keySource": "gat\/images\/images_set\/coffee.jpg",
        "idSiteKey": "3",
        "text": "Coffee"
      },
      {
        "keySource": "gat\/images\/images_set\/dog.jpg",
        "idSiteKey": "4",
        "text": "Dog"
      },
      {
        "keySource": "gat\/images\/images_set\/horse.jpg",
        "idSiteKey": "5",
        "text": "Horse"
      },
      {
        "keySource": "gat\/images\/images_set\/police.jpg",
        "idSiteKey": "6",
        "text": "Police"
      },
      {
        "keySource": "gat\/images\/images_set\/tree.jpg",
        "idSiteKey": "7",
        "text": "Tree"
      }
    ]
  }
}

I am trying to assign the content like this:

xhr.onreadystatechange = ensureReadiness; 
....
responseText = xhr.responseText;

When I attempt to parse it in JavaScript with:

response = JSON.parse(responseText);

If I try to access a property like

response.ObjectResponse.Operation

, I get the correct content.. but accessing the List always breaks.

Interestingly, if I use the same JSON string and directly assign it to a variable without calling the service, I can access the List successfully.

var myTemporalString ='{"ObjectResponse":{"Operation":"OK","Response":"SUCCESS","Message":"List of Keys Found","List":...';
response.JSON.parse(myTemporalString);

Any suggestions on why this might be happening?

javascript ajax json

Answer 1

Answer №1

One approach you might consider is as follows:

    xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {

                        try{
                                var jsonData = JSON.parse(xhr.responseText);
                            }catch(error){
                                console.log(error);
                                alert(error);
                                return;
                            }

                        for(let i=0; i<jsonData.ObjectResponse.List.length; i++){
                                   console.log(jsonData.ObjectResponse.List[i].text);
                                 console.log(jsonData.ObjectResponse.List[i].keySource);
                                   console.log(jsonData.ObjectResponse.List[i].idSiteKey);
                           }

              }
           }
       }

Answer 2

One approach you might consider is as follows:

    xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {

                        try{
                                var jsonData = JSON.parse(xhr.responseText);
                            }catch(error){
                                console.log(error);
                                alert(error);
                                return;
                            }

                        for(let i=0; i<jsonData.ObjectResponse.List.length; i++){
                                   console.log(jsonData.ObjectResponse.List[i].text);
                                 console.log(jsonData.ObjectResponse.List[i].keySource);
                                   console.log(jsonData.ObjectResponse.List[i].idSiteKey);
                           }

              }
           }
       }

Answer 3

Answer №2

Employ a loop for efficient iteration!

let items = responseObject.arrayOfItems;
let length = items.length;
for(index=0; index<length; index++) {
    //Access individual items using items[index]
    items[index].keyValue
    items[index].siteIDKey
    items[index].description
}

Answer 4

Employ a loop for efficient iteration!

let items = responseObject.arrayOfItems;
let length = items.length;
for(index=0; index<length; index++) {
    //Access individual items using items[index]
    items[index].keyValue
    items[index].siteIDKey
    items[index].description
}

Decoding JSON data with JavaScript

Answer №1

Answer №2

Similar questions

Can you explain the meaning behind this TypeScript variable declaration syntax?

Issue with Panel Settings and Tooltip in Amcharts

Regular expressions - For alphanumeric or numeric with a possible slash character included

Converting Gson to JSON with Node.js: A step-by-step guide

A step-by-step guide on enabling Autoclick for every button on a webpage

What is the best way to utilize multiple Ajax requests in order to generate server-side response data?

Update information with a fresh GET call - React Dropdown

Identifying the Click Event Within an ngx Bootstrap Modal

When you find that the plugins on pub.dev do not offer web support, consider utilizing npm packages for Flutter web development

Using knockoutjs to call a component on the home page

Navigating through a collection of elements

Guide to importing scoped styles into a <NextJS> component

Creating unique border-radius for each point in a Highcharts column chart with React

Guide on how to create a custom response using class-validator in NestJS

Discover the combobox element and its value can be easily achieved by using Selenium's find_element_by_xpath method

Flickering effects in THREE.js using Frame Buffer Objects

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3

Setting up the Firebase emulator: should you use getFirestore() or getFirestore(firebaseApp)?

Fixing My Code with JQuery Tabs and Hyperlinking

Encountering an issue with compiling Angular due to a Type Inference error