Exploring Angular JS for advanced JSON parsing with nested structures

Here is the JSON data provided. I am interested in using information from 2ndCol, 3rdCol, and 4thCol columns within the rows.

{  

   "workflows":[  
      {  
         "New":{  
            "All":{  
               "sections":[  
                  {  
                     "id":"section_1",
                     "section":"",
                     "title":"SEPG Audit Checklist",
                     "rows":[  
                        {  
                            "id" : "0",
                            "label" : "How do you establish and maintain the description of the process needs and objectives for the organization?",
                            "2ndCol" : {
                                "type" : "select",
                                "source":[  
                                      {  
                                         "id":"Yes",
                                         "value":"Yes"
                                      },
                                      {  
                                         "id":"No",
                                         "value":"No"
                                      },
                                      {  
                                         "id":"N/A",
                                         "value":"N/A"
                                      }
                                ],
                                "value":[],
                                "required":true,
                                "disabled":false,
                                "hidden":false
                            },
                            "3rdCol" : {
                                "type" : "select",
                                "source":[  
                                      {  
                                         "id":"Yes",
                                         "value":"Yes"
                                      },
                                      {  
                                         "id":"No",
                                         "value":"No"
                                      }

                                ],
                                "value":[],
                                "required":true,
                                "disabled":false,
                                "hidden":false
                            },
                            "4thCol" : {
                                "type" : "textarea",
                                "label": "Comments",
                                "PlaceHolder":"Enter Comment",
                                "Value":""
                            }
                        },
                        {  
                            "id" : "1",
                            "label" : "Explain Organizational process performance objectives?",
                            "2ndCol" : {
                                "type" : "select",
                                "source":[  
... (remaining content has been omitted for brevity)

I have successfully accessed the id and label properties from the rows. However, when attempting to access the 2ndCol, 3rdCol, and 4thCol values within the rows, an illegal argument error occurs.

Upon inspecting my angular controller:

angular.forEach($scope.auditJSON.workflows, function(workflow, workflowIndex) {
                    angular.forEach(workflow, function(workflowValue, workflowKey) {
                        angular.forEach(workflowValue, function(value, roleKey) {
                            angular.forEach(value.sections, function(section, sectionIndx) {
                                angular.forEach(section.rows, function(row, rowIndx) {  

                                    console.log(row.label); // This works fine

                                    console.log(row.2ndCol.type); // Error occurs here

                                });
                            });
                        });
                    });
                });

I am currently facing challenges in resolving this issue.

javascriptjsonangularjs

Answer №1

Your use of angular.forEach seems to be causing some issues.

angular.forEach($scope.data, function (workflow, workflowIndex) {
        angular.forEach(workflow, function (workflowValue, workflowKey) {
            angular.forEach(workflowValue, function (value, roleKey) {
                angular.forEach(value, function (sections, sectionIndx) {
                    angular.forEach(sections, function (section, rowIndx) {
                        angular.forEach(section, function (row, rowIndx) {
                            angular.forEach(row, function (row, rowIndx) {
                                if (rowIndx === 'rows') {
                                    angular.forEach(row, function (row, rowIndx) {
                                        var row2 = row['2ndCol'];
                                        var row3 = row['3rdCol'];
                                        console.log(row2, row3);
                                    });
                                }
                            });
                        });
                    });
                });
            });
        });
    });

I suggest creating a repository to demonstrate how it should work properly. It's also advisable to avoid excessive use of nested forEach loops in your production code!

EDIT: https://github.com/eknowles/blank-ng/tree/29902467/nested-json-parsing-in-angular-js

Answer №2

In your request, you mentioned that you are trying to retrieve the type values of the 2ndCol and 3rdCol [as indicated in the comments].

 console.log(row.2ndCol.type); // This line is causing an error

You also stated that you are encountering an error. I have provided a code block that should address this issue.

angular.forEach($scope.auditJSON.workflows, function(workflow, workflowIndex) {
                angular.forEach(workflow, function(workflowValue, workflowKey) {
                    angular.forEach(workflowValue, function(value, roleKey) {
                        angular.forEach(value.sections, function(section, sectionIndx) {
                            angular.forEach(section.rows, function(row, rowIndx) {  
                                    if(row['2ndCol'].type === 'select' && row['3rdCol'].type === 'select'){
                                        if(row['2ndCol'].value != row['3rdCol'].value){
                                            console.log(row['2ndCol'].value);
                                            console.log(row['3rdCol'].value);
                                        }
                                    }

                            });
                        });
                    });
                });
            });

If this solution resolves your issue, please mark it as the accepted answer.

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 locomotive scroll elements mysteriously vanish as you scroll, leaving the footer abruptly cut off

After successfully implementing locomotive scroll on my website, I encountered some issues when uploading it to a live server. Elements started bumping into each other causing flickering and disappearing, with the footer being cut off as well. It appears t ...

javascriptlocomotive-scroll

React Router updates the URL path without actually rendering the content of the second page

I'm having an issue with my React app where the address changes correctly in the search bar, but the page is not loading. Here is my code: import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; i ...

javascriptreactjsreact-router-dom

Deselecting every row in the px-data-table

I have integrated px-data-table into my Angular2 application. The data-table setup in my code looks like this: <px-data-table #myTableRef [tableData]='tableDetails' language="en" (px-row-click)="selectedChanged($event)" (px-select-all-click)= ...

javascriptangulartypescriptpolymer-1.0predix

Mastering the correct usage of parsing and stringifying in JSON is

When I receive data from the server, it looks like this: ['model':{"category":[{"id":1}],"food":[{"id":1}].... // lengthy json code I am wondering how to extract the category id and food id using jQuery or JavaScript. I have tried using JSON.p ...

javascriptjqueryjson

When using React hooks forms, setting default values from a reduced array does not automatically populate the form. However, manually entering the same object into the form does

As I work with react hooks forms, I am facing a challenge in setting default values for a form generated by mapping over an array to output the inputs. After reducing the array into an object format like {name0:"fijs",name1:"3838"...}, manually passing thi ...

javascriptreactjsstatereducereact-forms

Utilizing Predix Analytics service through Angular's Http request functionality

We have decided to implement an analytics service in our software using Predix. After successfully generating the Access token, we were able to retrieve time series data through the time series service. However, when attempting to integrate the analytics ...

angularjshttp-headerspredix

Iterate over the array by utilizing the split() method to segment the items with commas

I am struggling to separate the values of Months and place each value in a select box using .each. Despite my efforts, the split() function did not work as expected. The select box I created had two options but the values were not split into individual opt ...

javascriptjqueryhtmljsonsplit

hold on for the arrays to be populated with data from the ajax calls

Currently, I am facing an issue on my page where I need to wait for all data to be loaded and stored in the appropriate arrays before proceeding with any actions. The data retrieval involves three separate AJAX calls, but sometimes the loading process take ...

javascriptjqueryasp.net-mvc

Get access to a JSON key using forward slashes in Node.js

I'm facing an issue with accessing a property in an object that contains forward slashes. Specifically, I need to access the child key pattern. Unfortunately, my attempts so far have been unsuccessful. Please provide a solution to access the pattern p ...

javascriptnode.jsjson

How jQuery can be leveraged to eliminate HTML elements within a dropdown menu

<script> $(document).ready(function() { $('.notification .tools .remove').on('click', function () { alert('hola'); $(this).parentsUntil('.notification').remove(); }) ...

javascriptphpjquerycsslaravel-5.1

Saving JSON data to a file within a subpackage using Java on a Windows 7 operating system

I have a Java class within a package named com.project.test, and I am attempting to write some JSON data to a file called Output.json, which is located in a subpackage called com.project.test.sources. Here is the code snippet that I have used so far: Str ...

javajsonfilewriter

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

i am currently developing a JavaScript project to create a user interface for my rock, paper, scissors game. Currently, the game only runs in the console and prompts the player for input. So far, I have implemented three buttons (one each for rock, paper, ...

javascripthtmladdeventlistener

What is the best way to incorporate a factory in the "resolve" function of a $stateProvider in AngularJS?

When it comes to using a factory inside a "resolve" in AngularJS: angular .module("goHenry", ["ui.router"]) .factory("httpPost", httpPost) .controller("MainCTRL", ["$scope", MainCTRL]); function MainCTRL($scope, httpPost){ this.nameApp = "CiaoMiao"; ...

angularjsangularjs-routing

Ways to conceal the jqgrid thumbnail

I have a jqgrid that displays a large amount of dynamic data. I am looking for a way to hide the thumb of the vertical scrollbar in the jqgrid when scrolling using the mousewheel. Here is a basic example: var data = [ [48803, "DSK1", "", "02200220", "O ...

javascriptjqueryasp.net-mvcjqgrid

AngularJS: Managing Multiple Dropdown Menus

Exploring AngularJS for the first time, and currently working on dropdown functionality for a project. Each row in the code contains the same dropdown element. Here is a snippet of the code: HTML: <tr ng-repeat='item in items> <td> ...

angularjs

Error encountered: EPERM when attempting to rename a directory in Node.js unexpectedly

There is a requirement for me to remove the Backup folder, rename the processor as Backup, create a Processor folder again, and send a response to the user. The code I am using for this task is as follows: fsExtra.remove('app/Backup', function(e ...

javascriptnode.jsexpressfs

Utilize Django's TemplateView in ModelAdmin's add_view for seamless integration

As per the Django Admin site documentation, I have discovered that I can customize ModelAdmin.add_view to inject a custom view. My intention is to include a TemplateView to modify an admin page for adding or changing models. This unique view will feature ...

pythondjangoangularjsdjango-admin

Tips on utilizing AngularJS $http for transferring multipart/form-data

In the process of creating a visual interface that interfaces with various REST services (coded in Java), I am encountering an issue when attempting to call one such service: @PUT @Path("serviceName") public Response serviceName(final FormDataMultiPart mu ...

javascriptjavaangularjshttp

splitting xmlhttp.responsetext using loops

Currently, I have a JavaScript function that utilizes xmlhttp.responsetext to fetch data from MySQL. This data is then used to populate form fields in a dropdown menu, which has been functioning perfectly so far. However, the issue arises when I attempt to ...

phpjavascriptwhile-loopxmlhttprequest

Working with JSON responses in ASP.NET

Being a PHP Developer with limited knowledge of asp, I am working on a portal in PHP that requires an ajax post to an asp page on an external server. The response from the asp page is formatted like this: OK|some_id|some_name|some_id|0|1|||some_name|some_ ...

javascriptphpasp.netjson