Suggestions for rendering this JSON format

I am attempting to iterate through this JSON format, I have tried following this method but I am a bit confused with my code How to iterate JSON array in JavaScript?.

Also, I have a question, is this actually a valid JSON format or something different because I have never seen such formats before.

 {  
   "pageId":"2001",
   "segments":"15",
   "cacheable":"Y",
   "compagedetailsails":[  
      {  
         "compid":"MOTP_HELP_TXT",
         "masterkey":"104_MOTP_HELP_TXT",
         "pagedetails":[  
            {  
               "key":"MOTP_HELP_TXT",
               "val":[  
                  "One Time Password has been sent to your mobile number. Click on resend in XXX seconds."
               ]
            }
         ]
      },
      {  
         "compid":"MOTP_EXP_SEC",
         "masterkey":"104_MOTP_EXP_SEC",
         "pagedetails":[  
            {  
               "key":"MOTP_EXP_SEC",
               "val":[  
                  "120"
               ]
            }
         ]
      },
      {  
         "compid":"MOTP_SUCC_ACT",
         "masterkey":"104_MOTP_SUCC_ACT",
         "pagedetails":[  
            {  
               "key":"MOTP_SUCC_ACT",
               "val":[  
                  "LMONUSPR"
               ]
            }
         ]
      },
      {  
         "compid":"bcksignotp",
         "masterkey":"104_bcksignotp",
         "pagedetails":[  
            {  
               "key":"N104_bcksignotp0",
               "val":[  
                  "mxback"
               ]
            },
            {  
               "key":"N104_bcksignotp1",
               "val":[  
                  ""
               ]
            },
            {  
               "key":"N104_bcksignotp2",
               "val":[  
                  "0"
               ]
            }
         ]
      }



   ]
}

Answer №1

a = {  
   "pageId":"2001",
   "segments":"15",
   "cacheable":"Y",
   "compagedetailsails":[  
      {  
         "compid":"MOTP_HELP_TXT",
         "masterkey":"104_MOTP_HELP_TXT",
         "pagedetails":[  
            {  
               "key":"MOTP_HELP_TXT",
               "val":[  
                  "One Time Password has been sent to your mobile number. Click on resend in XXX seconds."
               ]
            }
         ]
      },
      {  
         "compid":"MOTP_EXP_SEC",
         "masterkey":"104_MOTP_EXP_SEC",
         "pagedetails":[  
            {  
               "key":"MOTP_EXP_SEC",
               "val":[  
                  "120"
               ]
            }
         ]
      },
      {  
         "compid":"MOTP_SUCC_ACT",
         "masterkey":"104_MOTP_SUCC_ACT",
         "pagedetails":[  
            {  
               "key":"MOTP_SUCC_ACT",
               "val":[  
                  "LMONUSPR"
               ]
            }
         ]
      },
      {  
         "compid":"bcksignotp",
         "masterkey":"104_bcksignotp",
         "pagedetails":[  
            {  
               "key":"N104_bcksignotp0",
               "val":[  
                  "mxback"
               ]
            },
            {  
               "key":"N104_bcksignotp1",
               "val":[  
                  ""
               ]
            },
            {  
               "key":"N104_bcksignotp2",
               "val":[  
                  "0"
               ]
            }
         ]
      }



   ]
}
for(var i = 0; i < a.compagedetailsails.length; i++)
{
  console.log(a.compagedetailsails[i]);
}

You can loop through the JSON data in a similar manner outlined above to access each element and its properties. This method allows for easy navigation of the data structure. Happy coding! Additionally, you can use the dot operator to extract specific values from the JSON.

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 JSON response is displaying a Content-type of text/html instead of the expected application/json

Utilizing the Postman Chrome extension, I am able to send both post and get requests while receiving corresponding responses. The responses that I am obtaining are as follows: { "Myresponse": { "ResponseStatus": 1, "PhoneCount": 3, "Page": ...

Having trouble with AngularJS ForEach and REST/JSON calls using $resource before the JSON data is ready?

My goal is to iterate through a resource using a controller and output each item in the JSON array with conditionals added later on. However, I am encountering an issue where it returns as "undefined": pfcControllers.controller('pfcArticlesCtrl' ...

Sending a POST request to WebAPI2

Currently, I am in the process of developing a REST service using WebAPI2. One of the tasks at hand is to add a new book to the database. Below is the structure of my Book model: public class Book { public int Id { get; set; } public string Name { ge ...

Unable to display the column data labels in Highcharts due to the incorrect formatting being presented

I'm having trouble displaying the datetime format at the top of a column in my chart. Although the tooltip shows the correct data when hovering over the columns, the labels are not formatted properly. Received output - 86340000 Expected output - 23: ...

What is the best way to narrow down the content cards displayed on the page?

I have recently developed a blog post featuring three distinct categories: digital marketing, tips and advice, and cryptocurrency. My goal is to implement a filtering system for these categories. For instance, I would like users to be able to click on a b ...

Exploring Next.js' dynamic routes with an alternative URL approach

Currently in the process of transitioning a React project to Next.js, I've encountered a minor issue with Dynamic Routing that doesn't seem to have any readily available solutions online. I have multiple information pages that utilize the same c ...

Generating an order prior to payment being made by the customer

When a user selects a product and clicks the pay button, they are redirected to Stripe where a new order is created. However, if the user changes their mind and cancels the payment during the Stripe checkout process, the order has already been created. How ...

Retrieving data from varied React components - triggered by clicking a LOG button

function Copy() { const Message = "MESSAGE"; const [messageList, setMessageList] = useState([{ text: "Hello", id: 1 }]); const [newMessageValue, setNewMessageValue] = useState(0); const addToMessageList = () => { alert(n ...

How to access a custom filter in ng-repeat using AngularJS

I'm working on creating a filter to sort through the items displayed in a table. Specifically, I want to filter out items based on a certain property value that may change depending on user input. I have attempted the following approach and it seems t ...

Displaying multi-dimensional arrays through the console in JavaScript and showcasing their elements

My array is supposed to have 140 indexes in a single format like this: array:[0-140] //however, it currently appears as: array: [ 0: [0-99], 1: [100-140] ] I've confirmed multiple times that it is just one array of objects. Why is it s ...

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

What steps can be taken to customize this code in order to develop a dictation application?

Currently, I have a code that functions by comparing two strings: str2 (which represents user input) and str1 (our reference string). The purpose is to determine whether any words in str2 are spelled correctly or incorrectly. So far, the code works well. H ...

Unexpected behavior can occur with generics when using an array of primitives instead of an array of wrapper objects

This snippet of code generates a List composed of Integer elements: Integer[] arr = new Integer[] {3,2,1}; List<Integer> list = Arrays.asList(arr); But when the same code is altered to use primitive "int" data type, it results in a List consisting ...

Tips for updating the value of a key in a JavaScript object when the TextField tag's value changes

Here is the schema I am using for my model: const workoutSchema = mongoose.Schema({ workouts: [ { workoutName: String, sets: Number, reps: Number, weight: Number, }, ], }); Below is the postData referenced in the text f ...

What could be the reason behind the error message "Java heap space exception in Eclipse" appearing while trying to use JavaScript autocomplete?

Whenever I attempt to utilize a JavaScript template on Eclipse, the program always freezes, displaying an error message stating: "Unhandled event loop exception Java heap space." To troubleshoot this issue, I initiated a top command in Ubuntu for both the ...

What is a way to nest a promise request within another request?

Q: How can I create a new promise within a request, and then return it in a nested request? Here is the code snippet: request({ // --------------request 1------------ url: request_data.url, method: request_data.method, form: request_data.data ...

Combining various API requests within a Vue component, which includes a for loop

I'm delving into the world of API chaining, specifically trying to link two different API calls within a 'notes' Vue component. My knowledge of promises is basic at best, but I'm eager to enhance my skills in this area. The initial API ...

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

The Ajax response fails to update my viewmodel

I have a value and a list that I need to update from within an Ajax callback. After retrieving a fresh value using .get(), I try to assign it to my view model's property, but the UI does not refresh properly. Below is the code snippet: function Searc ...

Executing multiple click events using JavaScript

I have recently started learning JavaScript and am experimenting with the following script: <script type="text/javascript"> $(document).ready (function() { $('#apply').click(function() { $('#applyinfo').toggle ...