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

Leveraging the null value from SQL Server across iOS, PHP, and JSON platforms

In developing my current application, I am facing an issue with handling JSON data retrieved from PHP scripts that interact with a SQL Server 2008 database. The challenge arises when the database lacks a value for a specific field, resulting in a null valu ...

What is the process for generating Json using information from a form?

Recently, I embarked on a project that involves creating online tours via a form filled out by the administrator. The data submitted through the form is then mapped into a Mongoose Schema and transformed into JSON. In the createcontent.js file, I utilized ...

Storing unprocessed JSON data as a string within the database

Is there a way to store Raw JSON data as a String in an MsSql database using a POST request with Jackson ObjectMapper for conversion, but faced with difficulties converting raw JSON into a string? { "id": 1, "someName":"someName", "json": { ...

When implementing `useRouter().push()` in Next.js, it has the ability to refresh

I have recently started using a custom node server in my Next.js app. Previously, useRouter().push() was working fine without a custom server and providing a seamless single-page app experience. However, with the custom server, it now refreshes my applicat ...

Difference between an optional field and a null value in kotlinx.serialization

Is there a way to differentiate between handling {data: null} and {} when parsing JSON using kotlinx.serialization? @Serializable class MyClass(val data: String?) ...

Using typecasting method to extract value from a JSON object

Struggling with a JavaScript and JSON issue. There's a function that includes a JSON object: blah=function(i){ var hash= ({ "foo" : "bar", "eggs":"bacon", "sausage":"maple syrup" }); var j=eval(hash); // Convert to Object console.log(j.toSou ...

Glitchy/Crazy CSS3 Animations

Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works: I apply the .preanimate class to rotate the phasing out di ...

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...

showing errors in case the username does not match the specified pattern

As I work with symfony, one of the challenges is displaying errors when the username does not fit the specified pattern. How can this be achieved? {{ form_widget(form.username, {'attr':{'pattern': '[a-zA-Z]*'} }) }} ...

In Internet Explorer 11, the Content-Type setting is not functional and may cause issues with certain functionalities

My initial attempt to solve the issue involved using the method beginQuoteFileUnquoteUpload1, which created a proper boundary and Content-Type. However, upon receiving the file, I discovered that it was corrupted :( var formData = new FormData(); formD ...

Exploring the Power of Constants in Karma and Jasmine for Enhanced Performance

To sum it up: I prefer storing hard-coded values in a separate file for reuse across multiple test specifications. Explaining further: Currently following the AngularJS tutorial, I am aiming to write more organized code. In step 5, they mention using hard ...

Is there a way to confirm whether or not two files are identical?

Is there a reliable method to determine if two files are identical? I've been using a solution that involves downloading the first part of each file, converting the data to base64, and then comparing them. However, I've encountered an issue wher ...

Guide on transforming an array containing indexed objects into a simple object

Can anyone help me with converting an array of this specific type? place: [ { "_id": "xxxxx", "loc": [ 0: "xxx", 1: "xxx" ] } ] Into something ...

I'm having trouble understanding why I keep encountering this error message: "SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…"

I am in the process of implementing a download button feature that will allow users to download a document from my node.js server. Check out this stylish button: https://i.stack.imgur.com/s4CjS.png For the front-end, I am utilizing Angular as the fram ...

Guzzle eliminates unnecessary request methods

Is there a way to streamline the redundant request method for writing? Currently, my code appears as follows: $response['slide'] = $this->_client->request('GET', 'artikelc/slidelimit',[ 'query' => [ ...

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

Navigating between parent and child states in an Ionic application can be made even

I have set up my ionic app with a ui-router configuration where the locations state acts as the parent for two other states - map and favourites. Additionally, I have a separate state called updates which serves as a detailed page that can be accessed from ...

A Step-by-Step Guide to Launching PDF Blob from AJAX Response in a Fresh Chrome Tab

I'm sending a POST request to a server, and in response, I receive a PDF file that is returned as a blob. To handle this blob, I am using the "handle-as='blob'" attribute of iron-ajax (a Polymer element), just to cover all bases. Now, my g ...

Tips for validating a form's input on an ajax page with the help of jQuery

I am facing an issue with a form containing two inputs. The first input can be validated before triggering an ajax function, but the second input cannot be validated. The second input is loaded from a page using ajax, along with the submit button. I need t ...