Present intricate JSON data using only one ng-repeat in AngularJS

Question

Present intricate JSON data using only one ng-repeat in AngularJS

I am currently attempting to showcase all the books within a specific series. Initially, I utilized nested ng-repeat and achieved the desired outcome. However, with recent modifications to the layout requirements, I am no longer able to use nested ng-repeat (my goal is to have a single list of books). Ideally, it would look something like the example below:

<ul>
    <li>book 1 of series 1</li>
    <li>book 2 of series 1</li>
    <li>book 1 of series 2</li>
    <li>book 2 of series 2</li> 
    <li>book 1 of series 3</li>
    <li>book 2 of series 3</li>
</ul>

Is there a way to achieve this using only one ng-repeat? Or perhaps by employing another method like an Array?

Data

var data = {
    "records": [
        {
            "name": "Spectrum Series",
            "seriesid": "SpectrumSeries",
            "book": [
                {
                    "name": "White Curse",
                    "bookid": "WhiteCurse",
                    "image": "book1"                    
                },
                {
                    "name": "Blue Fox",
                    "bookid": "BlueFox",
                    "image": "book2"                   
                }
            ]
        }

… additional series
 ]
};

Controller

$scope.serieslist = data.records;

HTML

    <div ng-repeat="series in serieslist">
        <ul>      
            <li ng-repeat="book in series.book">                  
                <div>{{series.name}}</div>
                <div>{{book.name}}</div>                    
            </li>            
        </ul>
    </div>

javascript json angularjs nested angularjs-ng-repeat

Answer 1

Answer №1

If you're looking to display a single list of books, consider using the following code snippet:

<div ng-repeat="book in booklist">
        <li>                  
            <div>{{book.title}}</div>
            <div>{{book.author}}</div>
        </li>            
    </ul>
</div>

I hope this helps with what you're trying to achieve!

Answer 2

If you're looking to display a single list of books, consider using the following code snippet:

<div ng-repeat="book in booklist">
        <li>                  
            <div>{{book.title}}</div>
            <div>{{book.author}}</div>
        </li>            
    </ul>
</div>

I hope this helps with what you're trying to achieve!

Answer 3

Answer №2

In order to properly display the array in your controller, you should first flatten it into an array containing series numbers and book numbers. Then, utilize the ng-repeat directive on the new array.

To achieve this, you can iterate through the original array using two angular.forEach functions - one for the series and another for the books within each series.

$scope.serieslist = [];
var seriesNumber = 1;
angular.forEach(data.records, function(series) {
    var bookNumber = 1;
    angular.forEach(series.book, function(book) {
        $scope.serieslist.push(
            {
                seriesNumber: seriesNumber,
                bookNumber: bookNumber++,
                seriesid: series.seriesid,
                name: series.name,
                book: book
            });
    });
    seriesNumber++;
});

For a live example, check out this plunker

Answer 4

In order to properly display the array in your controller, you should first flatten it into an array containing series numbers and book numbers. Then, utilize the ng-repeat directive on the new array.

To achieve this, you can iterate through the original array using two angular.forEach functions - one for the series and another for the books within each series.

$scope.serieslist = [];
var seriesNumber = 1;
angular.forEach(data.records, function(series) {
    var bookNumber = 1;
    angular.forEach(series.book, function(book) {
        $scope.serieslist.push(
            {
                seriesNumber: seriesNumber,
                bookNumber: bookNumber++,
                seriesid: series.seriesid,
                name: series.name,
                book: book
            });
    });
    seriesNumber++;
});

For a live example, check out this plunker

Answer 5

Answer №3

Here is a functional JS fiddle

To implement nested ng-repeat, simply replace the DOM element as shown below:

<div ng-app='Your app'>
     <div ng-controller='Your controlelr'>
        <ul ng-repeat="series in serieslist">            
            {{series.name}} 
            <li ng-repeat="book in series.book" >{{ book.name }}</li>
        </ul>
      </div>
 </div>

You can also use the following code snippet for similar functionality:

<div ng-app='myApp'>
     <div ng-controller='Home'>
        <ul ng-repeat="series in serieslist">            
            <li ng-repeat="book in series.book" >{{ book.name }} of {{series.name}}</li>
        </ul>
      </div>
 </div>

Click here to view the final result on JS Fiddle

Answer 6

Here is a functional JS fiddle

To implement nested ng-repeat, simply replace the DOM element as shown below:

<div ng-app='Your app'>
     <div ng-controller='Your controlelr'>
        <ul ng-repeat="series in serieslist">            
            {{series.name}} 
            <li ng-repeat="book in series.book" >{{ book.name }}</li>
        </ul>
      </div>
 </div>

You can also use the following code snippet for similar functionality:

<div ng-app='myApp'>
     <div ng-controller='Home'>
        <ul ng-repeat="series in serieslist">            
            <li ng-repeat="book in series.book" >{{ book.name }} of {{series.name}}</li>
        </ul>
      </div>
 </div>

Click here to view the final result on JS Fiddle

Answer 7

Answer №4

One way to simplify your list is by utilizing a tool like underscorejs to create a flat version, which you can then iterate over using ng-repeat. To learn more about how to accomplish this task, check out Karl's response to a similar query on stackoverflow at this link: How to flatten with ng-repeat

Answer 8

One way to simplify your list is by utilizing a tool like underscorejs to create a flat version, which you can then iterate over using ng-repeat. To learn more about how to accomplish this task, check out Karl's response to a similar query on stackoverflow at this link: How to flatten with ng-repeat

Answer 9

Answer №5

Data Transformation

$scope.serieslist = data.records;
    $scope.flatbooklist = [];
    angular.forEach($scope.serieslist, function (series)
    {
        angular.forEach(series.book, function (book)
        {
            $scope.flatbooklist.push({seriesname: series.name, seriesid: series.seriesid, bookname: book.name, bookid: book.bookid, bookimage: book.image});
        });
    });

Displaying Books

<ul ng-repeat="book in flatbooklist">
    <li>
        <div>{{book.seriesname}}</div>
        <div>{{book.bookname}}</div>
    </li>
</ul>

Answer 10

Data Transformation

$scope.serieslist = data.records;
    $scope.flatbooklist = [];
    angular.forEach($scope.serieslist, function (series)
    {
        angular.forEach(series.book, function (book)
        {
            $scope.flatbooklist.push({seriesname: series.name, seriesid: series.seriesid, bookname: book.name, bookid: book.bookid, bookimage: book.image});
        });
    });

Displaying Books

<ul ng-repeat="book in flatbooklist">
    <li>
        <div>{{book.seriesname}}</div>
        <div>{{book.bookname}}</div>
    </li>
</ul>

Present intricate JSON data using only one ng-repeat in AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Angular Material failing to adapt to mobile devices

Steps for transforming an array of objects into an array of values based on a specific key

Exploring CouchDB through Ajax to interact with a static website

retrieving data from a php file using ajax for a post request

Following recursive loop JSON

What steps do I need to take to deploy my React app onto a server?

Error: Unable to set attribute because the property is undefined in the onLoad function

Python pymysql encountering a syntax error when trying to insert a JSON object

The element "Footer" cannot be found in the file path "./components/footer/Footer"

DOM doesn't reflect changes to nested object when component prop is updated

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

Creating a Rails model without an associated HTML view involves generating the model using Rails scaffolding

Using assert.rejects() in Mocha and Node: A Complete Guide

Error encountered during file download with AXIOS: TypeError - 'validateStatus' in blob cannot be searched using 'in' operator

Acquire a portion of a string with JavaScript or jQuery

Error: The react render method is unable to determine the length of an undefined property

Aggregate the properties of objects in an array into a single object using Lodash

The functionality of Angular binding appears to be experiencing issues when used in conjunction with ngIn

Generating multiple circles on Google Map using ng-maps

What is the best way to format a User object into JSON before sending it to an API endpoint?