Looping through nested arrays in an array of objects with Angular's ng-repeat

I'm struggling to access an array within an array of objects in my AngularJS project.

Here's the HTML:

<li ng-repeat="ai in main.a2">
  <div np-repeat="bi in ai.b">
    <span ng-bind="bi"></span>b2
  </div>
 </li>

And here is the javascript:

var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function($scope) {
  self.a2 = [
    {b: ['foo']},
    {b: ['bar', 'baz']},
    {b: ['boo']}
 ];
}]);

The expected output should be:

foob2
foobazb2
boob2

However, the actual output is:

b2
b2
b2

You can view the (non-working) example here.

I've looked at similar posts, but most have simple mistakes. I believe I may have fallen into a pitfall that I haven't caught yet.

Answer №1

There is a typo error in your code snippet

<div np-repeat="bi in ai.b">
. Please correct it to:

<div ng-repeat="bi in ai.b">

function MyCtrl($scope) {
    $scope.a2 = [
       {b: ['foo']},
       {b: ['bar', 'baz']},
       {b: ['boo']}
    ];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
   <li ng-repeat="ai in a2">
       <div ng-repeat="bi in ai.b">
         <span ng-bind="bi"></span>b2
       </div>
   </li>
</div>

Answer №2

There was a small error pointed out by @Arg0n. The code should use ng-repeat instead of np-repeat.

To make it display inline, add style="display:inline".

<li ng-repeat="ai in main.a2">
    <div ng-repeat="bi in ai.b" style="display:inline">
      <span>{{bi}}</span>
    </div>b2
  </li>

Check out the demo

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

Managing errors in AngularJS via global $http event handling

I am in need of a way to globally intercept specific error scenarios involving $http requests, so that controllers do not have to handle these errors individually. I believe using an HTTP interceptor is the solution, but I am unsure how to prevent controll ...

Is there a way to achieve horizontal alignment for the Twitter and Facebook buttons on my page?

By utilizing the html code provided, I successfully incorporated Twitter and Facebook "Like" buttons into my website. Initially, they were stacked vertically, which resulted in excessive use of vertical space. To optimize space usage, I decided to align th ...

Expiration Alert: SSL Certificates for HERE Links will expire shortly

Our SSL certificates for the following URL's are approaching expiration: *.base.maps.ls.hereapi.com geocoder.ls.hereapi.com Do you have any information on when these URLs will be updated with new certificates? ...

React frontend encountered a connectivity issue while trying to establish a network connection

Our app utilizes next.js connected to express, which is further linked to AWS MySql for database management. While attempting to load some products stored in the database, an error message pops up: TypeError: NetworkError when trying to fetch resource. ...

Error in Browserify Express App: Unexpected token while parsing the file

I have been attempting to browserify a javascript file. When I run the command: browserify global.js -o bundle.js An error message is returned: Error: Parsing file C:\ocquiz\public\javascripts\global.js: Unexpected token (756 ...

Where can I locate the list of events supported by CKEditor 4?

Looking for the list of available events I attempted to locate the event list in the official documentation, but unfortunately came up short. I resorted to searching through the source code using .fire("/s+") to identify all available events. However, thi ...

What is the process for clearing the cache of a crawling URL?

Currently, I am operating a crawler that gets triggered through an expressjs call. However, whenever I make the same request again, the crawler runs once more but indicates that all routes have already been completed. I even went to the extent of deleting ...

What is the best way to transform an array of arrays into an array of objects using AngularJS?

Here is some code I am working on: $scope.students=[]; $scope.students[[object Object][object Object]] [0]{"id":"101","name":"one","marks":"67"} [1]{"id":"102","name":"two","marks":"89"} I would like to reformat it into the ...

Switching user agents to access mobile websites

I'm currently using JavaScript to redirect the main website to the mobile website, but I'm struggling to switch back to desktop view on a mobile device. Is there any way to provide a link labeled "Full Website" that redirects to the main website ...

Error in AngularJS when passing object to modal dialog

I'm facing a challenge with an AngularJS application I'm developing. It involves displaying a list of contacts, each accompanied by a button that triggers a modal containing a form for editing the contact information. The issue arises when attemp ...

What is the best way to generate a live map with constantly updating markers?

Is it possible for me to learn how to develop a live map similar to the one on this site: www.lightningmaps.org? It's fascinating to watch new markers pop up every few seconds. I'm interested in building a real-time map that can track IP locatio ...

When the button is clicked, send data using 'POST' method to the php file and fetch

<script> $(document).ready(function(){ $("#vE_rebtn").click(function{ var reverifyEmail = '<?php echo $_SESSION["verifyEmIPv"]; ?>'; $('#rE_rebtn').hide(); $('#re_ ...

What is the process for transforming a method into a computed property?

Good day, I created a calendar and now I am attempting to showcase events from a JSON file. I understand that in order to display a list with certain conditions, I need to utilize a computed property. However, I am facing difficulties passing parameters to ...

The Angular filter is failing to display the category value

My issue lies in adding a filter to display categories, as my setCurrentCategory function is not showing any value but instead displaying 'undefined'. The goal is to show the category for each person. I'm using ng-click to pass to my functio ...

Create a button toggle feature to dynamically display data for a specific record within an ng-repeat loop

Currently, I am facing an issue while implementing a start and stop timer in JavaScript for a list of records. To display all the items, I am using ng-repeat. Each repeated element has a Start/Stop toggle button. The problem arises when there are 4 records ...

Tips to successfully save and retrieve a state from storage

I've encountered a challenge while working on my Angular 14 and Ionic 6 app. I want to implement a "Welcome" screen that only appears the first time a user opens the app, and never again after that. I'm struggling to figure out how to save the s ...

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

I'm currently using react chart js for displaying a doughnut in my component. "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0", However, I'm facing an issue where the title is not being displayed: const d ...

Utilizing ion-list to showcase the subcategories of the chosen element

I'm currently developing an app that involves displaying a list of items. When a user selects an item, they are redirected to another page where a new set of items is listed with checkboxes for further actions. While I am able to select an item from t ...

Tips on Comparing Date and Time in Android Platform

Two dates are present, date1 (current) and date2 obtained from a JSON string as 2016-07-09 21:26:04. I need to perform a comparison between these two dates using the following logic: if(date1 < date2){ } ...

Struggling to display the preloader animation while waiting for the render.com server to start up (using the free tier web service)

My choice for deploying dynamic websites is render.com and I am currently using their free tier. The issue with this free service is that Render spins down the web service after 15 minutes of inactivity, resulting in a delay when it needs to spin back up u ...