Unable to retrieve fields once an array has been added to another array

I am facing an issue with accessing specific fields in an array of sections. The sections are added to the array when a user clicks on a checkbox, and the structure is defined as follows:

$scope.print = {
  sections:[] 
};

Once all the selected sections are obtained, I use a service to fetch a list of questions for each section by passing in an ID like this:

var questions = [];
myService.getQuestions(id)
  .success(function (data) {
    questions = data;
  });

Subsequently, I assign these fetched questions back to the original array based on the matching QuestionSectionID like so:

angular.forEach($scope.print.sections,
    function (value, key) {
        if (value.QuestionSectionID === id) {
            $scope.print.sections[key].questions = questions;
        }
    });

The assignment appears to be successful; however, I am encountering difficulties in accessing the individual field names within the questions array.

In my HTML code, I have implemented the following:

<div ng-repeat="ps in print.sections">
    <div>
        <h4>{{ps.vchSectionName}}</h4>
    </div>
    <div ng-repeat="section in ps.questions">
        <div ng-repeat="q in section">
            {{q.vchQuestionText}}
        </div>
    </div>
</div>

When trying to access the "q.vchQuestionText" field, the HTML output is blank. However, if I simply display "q" using the following:

<div ng-repeat="q in section">
  {{q}}
</div>

I can see all the information present in each field of "q". My aim is to access each field in "q" by its name. Can you please guide me on what might be missing or incorrect in my approach?

Your help would be greatly appreciated!

Answer №1

So, the reason I was able to show all the data in "q" but couldn't specify a field was due to an excess of ng-repeat directives.

All it took was this simple solution:

<div ng-repeat="ps in print.sections">
<div>
    <h4>{{ps.vchSectionName}}</h4>
</div>
    <div ng-repeat="q in ps.questions">
        {{q.vchQuestionText}}
    </div>
 </div>

I hope this can assist someone else facing a similar issue. Many thanks to everyone for their support.

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

JSZip on Repeat: Exploring the Possibilities!

Can JSZip be used to generate multiple zip folders and files in a loop? If so, how can this be accomplished? For example: const JSZip = require("jszip"); const saveAs = require('file-saver'); const fs = require("fs"); for(let i = 0; i < 5; ...

Swap out a particular component during the testing phase

Currently, I am running tests on my React-Redux application using Jest. Within my API calls, I have integrated a fetch module called cross-fetch. However, I am looking to substitute this with fetch-mock. Take a look at my directory structure: Action.js i ...

What is the process for updating the header of the group column from "Group" to "my custom heading"?

In my project, I need to replace the header "Group" with "MyCustomHeading". I am implementing this change using treeData in Material UI. ...

What is the best way to eliminate extra space at the bottom of glide.js?

Looking for assistance to eliminate the whitespace at the bottom of an image or slider. Can anyone help? Here is a preview of the image: https://i.stack.imgur.com/mEYY3.png If you'd like to take a look, here is the project code link: I had to down ...

What is the method to make a CSS selector avoid selecting a specific element?

Let's say I have a CSS style that looks like this: input.validation-passed {border: 1px solid #00CC00; color : #000;} The JavaScript validation framework I am using injects every input tag with a class="validation-passed". While this works fine ...

What is the best way to cancel a setTimeout in a different function within a React JS application?

I'm currently working with the following code snippet: redTimeout = () => { setTimeout(() => { this.props.redBoxScore(); this.setState({ overlayContainer: 'none' }); }, 5000); } In addition, I h ...

Is it possible to use null and Infinity interchangeably in JavaScript?

I've declared a default options object with a max set to Infinity: let RANGE_DEFAULT_OPTIONS: any = { min: 0, max: Infinity }; console.log(RANGE_DEFAULT_OPTIONS); // {min: 0, max: null} Surprisingly, when the RANGE_DEFAULT_OPTIONS object is logged, i ...

A guide on updating label text using JavaScript or jQuery following a click on an HTML form

Seeking a solution to modify the text underneath a name form element on a squarespace.com website. This platform aids in website creation, but direct manipulation of the source code is not allowed. However, injecting JavaScript is permitted. I have identi ...

Error message in React-router: Cannot read property 'func' of undefined, resulting in an Uncaught TypeError

When attempting to launch my react application, I encountered an error in the browser console: Uncaught TypeError: Cannot read property 'func' of undefined at Object../node_modules/react-router/lib/InternalPropTypes.js (InternalPropTypes.js: ...

Information disappearing upon returning to a previous screen

Currently, I am developing a web application using AngularJS and HTML. As part of the application, I created a dashboard on the home screen (referred to as Screen A) that displays a list of clients with a summary. When a client is clicked, it navigates t ...

Node - What could be causing my gif to run at a slower pace while utilizing GifEncoder?

I am encountering an issue with rendering a Gif using the GifEncoder library (specifically, an older version). The output gif is much slower and appears to lag. Below is the code I have been using: import GIFEncoder from "gif-encoder-2"; import f ...

What is the best way to send data via the HTTP POST method in AngularJS?

I have a situation where I am using the same HTTP method in different controllers as shown below: Service: var method="sampleMethod" HotalStatisticService.GetReservations = function (data) { return $http({ method: 'POST' ...

Find the most recent date in a file and display the line associated with it

I am working with a document named Application.txt that consists of multiple columns and rows as shown below: ApplNo DocsURL DocDate 4782 www…. 7/28/2003 4782 www…. 11/23/2008 4782 www…. 3/24/2012 5010 www…. 4/5/2003 5010 ww ...

jQuery is working perfectly on every single page, with the exception of just one

Check out my code snippet here: http://jsfiddle.net/9cnGC/11/ <div id="callus"> <div class="def">111-1111</div> <div class="num1">222-2222</div> <div class="num2">333-3333</div> <div class="num3">444-4444< ...

Firebug detected an error with the regular expression flag "h" after executing the YUI Compressor

When I run YUI Compressor, an error occurs with the message: invalid regular expression flag h [Break On This Error] ction(event){$(this).removeClass('lumi...cs_glb.php</b> on line <b>221</b><br/> The issue seems to be with t ...

Displaying all Sunday events in a jQuery FullCalendar

Is there a way to automatically add events for all the Sundays on my calendar using FullCalendar? day = 'Sunday'; <------ I want to specify this day to create an event var date = new Date(); var event = {id: result.id, title: from_time + &ap ...

Tips for incorporating my withStyles classes into the export class component within my React application

I'm having difficulty applying styles to my React form. I'm utilizing withStyles from Material UI. Unfortunately, the styles aren't being applied. I tested the code in my initial <DialogContentText> but it's not having any effect ...

Utilizing Ajax to send IP addresses and obtain location data

Is there a website or webpage that can be used to input a user's IP address and receive their country or location as plain text? Below is a code snippet demonstrating how I attempted to retrieve the user's IP address: I inserted the following c ...

Exploring the combination of Express router, Auth0, and plain Javascript: A guide to implementing post-login authentication on a router

After creating a front end with vite using vanilla javascript and setting up a backend with node.js express routes, I successfully integrated swagger for testing purposes. I have managed to enable functionalities such as logging in, logging out, and securi ...

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...