Exploring the world of AngularJS with nested JSON structures and utilizing ng-repeat

While going through code left behind by a previous team member, I find myself navigating the transition to Angular solo, without anyone around to brainstorm with. This brings me to my question for the community.

I am working with JSON data that contains two nodes requiring iteration. The JSON structure is as follows:

{
    "questions": [
        {
            "text": "Do you plan to attend the session on 6/3 at 12?",
            "choices": [
                {
                    "name": "Answer_9LUL3A",
                    "display": "Yes",
                    "value": "Yes"
                },
                {
                    "name": "Answer_9LUL3A",
                    "display": "No",
                    "value": "No"
                }
            ]
        },
        
        {
            "text": "When you get the meeting/appointment invite accept it with the Notes client (as opposed to the iDevice)",
            "choices": [
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 12:00 PM - 01:00 PM",
                    "value": "09/01/2014~12:00:00 PM~01:00:00 PM"
                },
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 01:00 PM - 02:00 PM",
                    "value": "09/01/2014~01:00:00 PM~02:00:00 PM"
                },
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 02:00 PM - 03:00 PM",
                    "value": "09/01/2014~02:00:00 PM~03:00:00 PM"
                },
                {
                    "name": "Answer_9NFPMZ",
                    "display": "September 1, 2014 03:00 PM - 04:00 PM",
                    "value": "09/01/2014~03:00:00 PM~04:00:00 PM"
                }
            ]
        }
    ]
}

I need to showcase the questions.text and underneath each one, display the questions.choices.display for all questions. Each question may have multiple answers. For example:


Q1 How are you?
A1 Feelin' Fine
A2 Fair
A3 Feelin' Bad

Q1 Where are you?
A1 Beach in Bahamas
A2 Broadway in New York
A3 Prison in Leavenworth

My dilemma lies in deciding the best approach to utilize ng-repeat in this scenario. Should I create a single array containing both the questions and their respective answers, or separate them into two arrays (one for questions, one for answers) and manage potential nesting issues? Any advice would be greatly appreciated.

Please note: I'm currently recovering from kidney stone surgery and under pain medication, which might cloud my judgment. Kindly refrain from overwhelming responses while I navigate through this haze. Thank you all for your understanding in advance.

Answer №1

First things first, no need for any apologies. Wishing you a speedy recovery.

Regarding your query, I have accomplished similar tasks by implementing a nested ng-repeat method.

<div ng-controller='QueriesController as queryList'>
    <div ng-repeat='query in queryList.queries'>
        {{ query.content }}
        <div ng-repeat='result in query.results'>
            {{ result.output }}
        </div>
    </div>
</div>

Feel free to incorporate your own directives and enhancements. Good luck with your project endeavors.

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

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I chec ...

What is causing my for/in loop to return null results, while the regular for loop works perfectly fine? (VISUALS included)

My goal is to iterate through an array of objects using a for/in loop in order to log specific properties of each object to the Chrome dev console. However, I am encountering issues as I keep getting null values. As a workaround, I attempted to use a regul ...

Having issues with importing Highcharts Gauge using NPM and Webpack

I've integrated HighCharts into a website using vanilla JS, utilizing webpack/npm for module loading and importing. While Spline and Column charts are working perfectly fine, I encountered an issue when trying to add the standard Gauge chart (seen her ...

Ways to verify if a JsonObject contains a particular string

I am currently working with a Json Object that contains menus and submenus. However, there are instances where there are no submenus present. How can I determine if the JsonObject includes a specific String (Submenu) without encountering a JsonException? ...

Unable to show the response from an HTML servlet using Ajax and qTip2

I am having an issue where I am trying to display text (or html) received from a servlet response in a qTip2 tooltip within a jsp page. Despite verifying that the servlet is being invoked and returning text using Firebug, I encountered an error when attemp ...

Utilizing Captcha with Meteor's accounts-ui-bootstrap-3 for enhanced security

Is it possible to incorporate Captcha verification when utilizing the combo of Meteor packages accounts-ui-bootstrap-3 and accounts-password? What is the process for integrating a package such as captchagen with accounts-ui? ...

Adding user inputs to the tail end of API requests in Python

def i(bot,update,args): coin=args infoCall =requests.get("https://api.coingecko.com/api/v3/coins/").json() coinId = infoCall ['categories'] update.message.reply_text(coinId) An issue arises when trying to include the args specifi ...

Obtain information from a website, then initiate a lambda function to send an email and store the data in

As a beginner, I came across two different sets of instructions online. The first one was about using AWS Lambda to send data (Contact us - Email, Phone, etc) to my email via Amazon API Gateway and Amazon SES: https://aws.amazon.com/blogs/architecture/cre ...

The error callback in Jquery ajax is triggered despite receiving a 200 status code in the response

I am facing an issue with my ajax code. The success callback contains an alert that is not working properly. Here is the code snippet: $(".change_forex_transaction_status").click(function(){ $("#insufficient_funds").css("display","none"); var id = $( ...

Grab the current URL using useRouter in a Next.js app

I am using userouter to obtain the URL of the current page and then utilizing the clipboard to copy it. However, I am encountering an issue where the copied content shows as object object instead of the expected URL. Can someone please help me identify w ...

Having Difficulty Formatting HTML Input in Next.js

I'm encountering difficulties when trying to style HTML form elements in Next.js. I've been unsuccessful in applying CSS using a simple class name from the imported stylesheet, but have managed to achieve some success with inline styling by using ...

Tips for including assisting text in the date field with Material UI

Behold, my component definition: <DateField name={formElement.name} type="date" label={formElement.name} onChange={(date) => formik.setFieldValue(formElement.name, date)} value={formik.values[formElement.name] ...

Error in parsing string data in Django Chart.js ajax using javascript

I'm currently working on creating a chart web page using Django and Chart.js within the views.py file of the Django framework. class ChartView(TemplateView): template_name = 'graph.html' def get_context_data(self, **kwargs): ...

Is it possible to retrieve resolved parameters from a template-rendering function?

I'm facing a scenario where I have a state setup like this .state('dropdown', { url: '/dropdown', views: { "@":{ template: ...

Eliminate any properties with values that exceed the specified number in size

:) I'm trying to create a function that removes properties with values greater than a specified number. I've searched through multiple resources like this question on how to remove properties from a JavaScript object and this one on removing pro ...

Tips for ensuring only one dropdown is opened at a time

Hey there! I've been struggling with getting my dropdowns to open one at a time on my website. I attempted to hide them all by default, but they still insist on opening simultaneously. Any ideas on what I might be overlooking? Thank you for your help! ...

How to enable cross-origin resource sharing

While using $resource for making http calls, I encountered an issue with my backend application being deployed on a different port. When attempting to fetch data from the server using the request method(GET), my browser automatically attaches the request m ...

Accessing the name attribute of the TextField component, displayed as a Select Box in Material-UI, by utilizing the event object received from the onFocus prop

Utilizing the "@material-ui/core": "4.11.2" library along with "react": "16.8.6", I've encountered an issue with the TextField component where the select prop is set to true. Specifically, I am unable to access ...

How can I turn off credential suggestions in a React JS application?

Is there a way to disable managed credential suggestion on a React JS web page using a browser? I have tried using the autoComplete=off attribute and setting editable mode with an onFocus event, but the password suggestions are still appearing. Any help wo ...

Nuxt - Vue - Utilizing middleware on a layout in a few simple steps

Recently, I developed a middleware for authentication in my Nuxt application and now I want to utilize it within a layout. However, when trying to call the middleware using the following code: export default { middleware: 'auth', I encounte ...