Is the value incorrect when using angular's ng-repeat?

Currently iterating through an array nested within an array of objects like this:

<div ng-repeat="benefit in oe.oeBenefits">
    <div class="oeInfo" style="clear: both;">
        <div class="col-md-2 oeCol">
            <img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
        </div>
        <div class="col-md-5 oeCol">
            <h1>{{ benefit.benefitName }}</h1>
            <p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
            <p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
            <p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
            <p>link</p>
        </div>              
        <div class="col-md-3 oeCol">
            <p class="oeFeatures" style="font-weight: 800;">Available Features</p>
            <ul>
                <li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
            </ul>            
        </div>  
        <p></p>
        <div class="col-md-12">
            <hr class="naviaHR100">                    
        </div>
    </div>
</div>

The JSON response looks like this, but I'm unable to retrieve the desired value. Here is the JSON output:

"oeBenefits": [
{
  "planId": "l0t3AlfKV%2fETUaQd0zZJGA%3d%3d",
  "benefitTypeId": 1,
  "benefitName": "Health Care FSA",
  "isHsaAvailable": false,
  "benefitMin": 0,
  "benefitMax": 3510,
  "numberOfContributions": 12,
  "carryoverAmount": null,
  "isDebitCard": true,
  "is100percent": true,
  "isGracePeriod": true,
  "allowDirectDeposit": true,
  "claimsRunout": 90,
  "employerSeed": "Your employer will contribute additional funds to your benefit",
  "learnMoreUrl": "http://www.naviabenefits.com/participants/benefits/health-care-fsa/",
  "Features": [
    {
      "key": "0",
      "value": "Navia Benefits Card"
    },
    {
      "key": "2",
      "value": "FlexConnect"
    },
    {
      "key": "4",
      "value": "Online claim submission"
    },
    {
      "key": "5",
      "value": "Online card swipe substantiation"
    }
  ]
},

All other repeated data from the object(s) are displaying correctly, except for the features section where I specifically want only the value, excluding the key.

Answer №1

Here is a solution that should help you resolve your issue:

<div ng-repeat="benefit in oe.oeBenefits">
 <div class="oeInfo" style="clear: both;">
    <div class="col-md-2 oeCol">
        <img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
    </div>
    <div class="col-md-5 oeCol">
        <h1>{{ benefit.benefitName }}</h1>
        <p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
        <p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
        <p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
        <p>link</p>
    </div>              
    <div class="col-md-3 oeCol">
        <p class="oeFeatures" style="font-weight: 800;">Available Features</p>
        <ul>
            <li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
        </ul>            
    </div>  
    <p></p>
    <div class="col-md-12">
        <hr class="naviaHR100">                    
    </div>
</div>

Your issue may lie with the incorrect usage of array objects in your inner loop.

Answer №2

It is recommended to use the code

<li ng-repeat="Features in oe.oeBenefits.Features">{{ Features.value }}</li>
rather than <li ng-repeat="Features.value

Answer №3

When dealing with a nested ng-repeat, make sure your ng-repeat is structured like this:

<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>

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

Implementing CodeIgniter's HMVC structure to dynamically update data using AJAX functionality

Recently, I came across an AJAX function in an open-source code that caught my attention. function edit_person(id) { save_method = 'update'; $('#form')[0].reset(); // reset form on modals //Ajax Load data from ajax $.ajax({ ...

Using ThreeJS to Apply Dual Materials to a Mesh Entity

With ThreeJS, it's possible to incorporate more than one material into an Object3D/Mesh as stated in the documentation. You can either utilize a single Material or an array of Material: Class declaration and constructor for Mesh TypeScript file (exce ...

The render props on the child component are not appearing on the screen as expected

Recently diving into React Native, I created a stateless component designed to iterate through props that contain objects with arrays of tags. The goal was to extract and display a single tag from each array item. (Refer to the console log in the screensh ...

Utilize AngularJS to interact with JSON data

Greetings, I trust you are doing well. I have successfully created an API using PHP to fetch data from SQL and convert it into JSON. However, I am facing a challenge in manipulating the PHP code to retrieve the JSON data as per my requirements. I believe ...

Organize results from MySql using php

Trying to retrieve table values from a MySQL database sorted has proven to be a challenge for me. While I am able to connect and update the table successfully, I struggle with displaying the messages in the HTML chat history sorted by time. Is there a mo ...

If the selected tab matches, collapse it using jQuery

When utilizing the jQuery accordion, I am looking to collapse if the currently active tab is selected. If I click on the same tab again, nothing happens. However, if I click on another tab, the activated tab changes accordingly. Check out an example on j ...

Functionalities of HTML controls

I currently have a select element in my HTML code which looks like this: <select> <option id="US" value="US"> </option> <option id="Canada" value="Canada"> </option> </select> My requirements are twofold: ...

How can you display a border around a <td> element in an HTML table only when it contains data, using jQuery or JavaScript?

My HTML table consists of the following structure: <table class="table table-bordered"> <thead> <tr> <th>Tag</th> <th>Time Code</th> </tr> </thea ...

I am facing difficulties in installing the necessary node modules for my Angular project

After attempting to run npm install, an error message is displayed towards the end: error syscall unlink 22396 error The operation was rejected by your operating system. 22396 error It's possible that the file was already in use (by a text editor or ...

Using jQuery to add emoticons to a div element

I am currently developing a small chat application and I would like to incorporate emojis into it. My goal is to allow users to click on an emoji, which will then appear in the text area where they type their message. When a user clicks on "select," I want ...

Missing RequestVerificationToken value when hiding HTML element using jQuery

I am encountering an issue with my ASP.NET MVC 4 form that involves checkboxes being used to show and hide certain HTML elements. When I initially visit the form page, the RequestVerificationToken value is correctly created as a hidden field. Some HTML ele ...

Expanding the functionality of a regular expression

My goal is to identify JavaScript files located within the /static/js directory that have a query string parameter at the end, denoted by ?v=xxxx, where 'x' can be any character or number. Here's an example of a match: http://127.0.0.1:8888 ...

Flex box causing Bootstrap5 responsive table to overflow

Need help with fixing overflow issue in a fixed-width div used as a left sidebar. The main content renders correctly except for tables with many columns, causing overflow before the scroll bar appears. How can this be resolved? Various layout attempts hav ...

Show or hide a component based on a mouse click in Vue JS

After a prolonged absence from working with Vue JS, I find myself in the process of displaying a list of data with a button for each item. The goal is to conditionally render a component when a button is clicked. I am wondering if there is a recommended a ...

How to retrieve specific items from an array contained within an array of objects using Express.js and MongoDB

Within the users array, there is an array of friends. I am looking to retrieve all friends of a specific user based on their email where the approved field is set to true. In my Node.js application, I have defined a user schema in MongoDB: const UserSchem ...

The issue of Angular 6 view failing to display accurate data upon page load

In my Angular 6 application, I've implemented a login feature using Firebase's Google login. The interface includes a button labeled Login when the user is logged out, and changes to Logout with the current email address displayed when the user i ...

I am looking to convert the input format of a timepicker using moment.js to display as 12:38:07 instead of 2018-01-23T12:38:07.439Z

In my project, I am utilizing AngularJS Material for the template and AngularJS for JavaScript. Due to the absence of a timepicker in Angular Material JS, I have opted to use a timepicker provided by Moment.js. The backend of my application is built using ...

Display the modal in Angular 8 only after receiving the response from submitting the form

I am encountering an issue where a pop-up is being displayed immediately upon clicking the submit button in Angular 8, before receiving a response. I would like the modal to only appear after obtaining the response. Can someone assist me with achieving thi ...

How come the hook keeps triggering endlessly in a loop when I try to pass the updated props?

I've encountered an issue with a custom hook I created for making HTTP requests. The problem is that the request seems to be firing in an endless loop, and I'm unsure of what's causing this behavior. My intention is for the request to only t ...

Server becomes unresponsive when executing the "concurrent:server" task

After running 'grunt serve' in the command line, the server gets stuck at Running "concurrent:server" (concurrent) task without displaying any error message indicating that the server is ending the process due to errors. The imagemin.js error doe ...