Angular ng-repeat - how to join or combine data from different arrays

Question

I'm trying to join/combine two arrays in angular ng-repeat.

Simple example book/author where I want to print book titles with coresponding author name.

Books are in one array, authors in another.

How to join data in this example?

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.authors = [{
    id: "1",
    name: "John"
  }, {
    id: "2",
    name: "Peter"
  }, {
    id: "3",
    name: "Mark"
  }];
  
  $scope.books = [{
    id: "1",
    id_author: "3",
    name: "Book Lorem"
  }, {
    id: "2",
    id_author: "1",
    name: "Book Ipsum"
  }, {
    id: "3",
    id_author: "1",
    name: "Book Dark"
  }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <div ng-repeat="book in books">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{authors[$index].name}}</div>
    <hr>
  </div>
</div>

You want to show the data based on the id which is unique. Not index? — Sai
– Sai, Commented Jul 19, 2017 at 7:02

Joseph Pernerstorfer · Accepted Answer · 2017-07-19 07:56:47Z

3

EDIT: At least AngularJS 1.2 is required

I would use angulars filter:

<div>
    Authors name: {{authors[$index].name}}
</div>

to:

<div>
    Authors name: {{(authors | filter:{'id': book.id_author}:true)[0].name}}
</div>

What we are doing here is taking the array authors and filter it by the expression 'id': book.id_author and we take the .name of the first element of this filtering ([0]).

Just in case you could check if you actually have the author in your array:

<div>
    Authors name: {{(authors | filter:{'id': book.id_author}:true) 
                     ? (authors | filter:{'id': book.id_author}:true)[0].name
                     : 'Unknown'}}
</div>

Best regards

PS (EDIT): fiddle with angular 1.2.6 -> http://jsfiddle.net/gqqv9k38/1/

edited Jul 19, 2017 at 7:56

answered Jul 19, 2017 at 7:17

Joseph Pernerstorfer

4244 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

akuljana Over a year ago

There is a problem if there is for example author with id:11, it shows that author, not author with id:1

Joseph Pernerstorfer Over a year ago

Hi, it is not strict but true what should be on the code, I already edited it. The reason it does not work on the fiffle is because the fiddle is using angular 1.0.1, is this the angular version you are using?

Joseph Pernerstorfer Over a year ago

The fiddle with angular 1.2.6 for example jsfiddle.net/gqqv9k38/1

Vivek Chaturvedi · Accepted Answer · 2017-07-19 07:30:28Z

This is the most optimized solution for your problem.

Put the below code in your controller file -

$scope.entries = [];
angular.forEach($scope.books,function(entry) {
    var author_name;
    var searchField = "id";
    var searchVal = entry.id_author;
    author_name = getAuthorName(searchField,searchVal,$scope.authors)
    $scope.SubInformation['author_name'] = author_name;
    $scope.entries.push(angular.extend(entry,$scope.SubInformation);   
});

function getAuthorName(searchField,searchVal,authors){
    for (var i=0 ; i < authors.length ; i++)
    {
        if (authors[i][searchField] == searchVal) {
            return authors[i]['name'];
        }
    }
}

And update your view file with below code :

<div ng-controller="MyCtrl">
  <div ng-repeat="book in entries">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{book.author_name}}</div>
    <hr>
  </div>
</div>

Slava Utesinov · Accepted Answer · 2017-07-19 07:38:00Z

You can create custom findAuthor method
Use common filter with strict to select exactly needed author id instead of similar

angular.module('app',[])
.controller('ctrl', function($scope){

  $scope.authors = [{
    id: "1",
    name: "John"
  }, {
    id: "11",
    name: "Peter"
  }, {
    id: "3",
    name: "Mark"
  }];
  
  $scope.books = [{
    id: "1",
    id_author: "3",
    name: "Book Lorem"
  }, {
    id: "2",
    id_author: "1",
    name: "Book Ipsum"
  }, {
    id: "3",
    id_author: "1",
    name: "Book Dark"
  }];
  
    
  $scope.findAuthor = function(id){
    return $scope.authors.find(function(x){
	    return x.id == id
   })};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<h4>1. findAuthor metod</h4>
<div ng-app='app', ng-controller='ctrl'>  
  <div ng-repeat="book in books">
      <div>Book title: {{book.name}}</div>
      <div>Authors name: {{findAuthor(book.id_author).name}}</div>
      <hr>
  </div>
  
<h4>2. With help of filter</h4>    
  <div ng-repeat="book in books">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{(authors | filter: {'id': book.id_author}: strict)[0].name}}</div>
    <hr>
  </div>

</div>

Sai · Accepted Answer · 2017-07-19 07:11:56Z

0

You can do like this:

<div ng-repeat="book in books">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{getAuthorName(book.id_author)}}</div>
</div>

in js:

$scope.getAuthorName(id) {
    var name;
    name = $scope.authors.find(function(author) {
        if(author.id_author === id) {
            return author.name;
        }
    }) 
    return name;
}

Hope this helps :)

answered Jul 19, 2017 at 7:11

Sai

2,6685 gold badges34 silver badges49 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-07-19 07:12:47Z

0

create the function and filter the name according to id

$scope.getName = function(obj){

    return $scope.authors.find(o=>{
      if(o.id == obj.id_author){return o }
    })
  }

call it like this

<div ng-controller="MyCtrl">
  <div ng-repeat="book in books">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{getName(book).name}}</div>
    <hr>
  </div>
</div>

Demo

answered Jul 19, 2017 at 7:12

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Pritam Banerjee · Accepted Answer · 2017-07-19 07:16:45Z

You can simply compare the values and add it to the books model. It can be done as shown below:

var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {

      $scope.authors = [{
        id: "1",
        name: "John"
      }, {
        id: "2",
        name: "Peter"
      }, {
        id: "3",
        name: "Mark"
      }];
      
      $scope.books = [{
        id: "1",
        id_author: "3",
        name: "Book Lorem"
      }, {
        id: "2",
        id_author: "1",
        name: "Book Ipsum"
      }, {
        id: "3",
        id_author: "1",
        name: "Book Dark"
      }];
      
      
      for(var i = 0; i < $scope.books.length; i++){
          var id = $scope.books[i].id_author;
          for(var j = 0; j < $scope.authors.length; j++){
              if($scope.authors[j].id ==  $scope.books[i].id_author ){
               $scope.books[i].authorName =  $scope.authors[j].name;
              }
          }
      }
      
   }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app = "myApp">
    <div ng-controller="MyCtrl">
        <div ng-repeat="book in books">
            <div>Book title: {{book.name}}</div>
            <div>Authors name: {{book.authorName}}</div>
            <hr>
        </div>
    </div>
</html>

Satinder singh · Accepted Answer · 2017-07-19 07:21:24Z

0

You can merge both JSON data into new array

 var  newArray= authors.map(x => Object.assign(x, books.find(y => y.id == x.id)));

edited Jul 19, 2017 at 7:21

answered Jul 19, 2017 at 7:15

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Comments

Gourishankar · Accepted Answer · 2017-07-19 07:36:31Z

Here is your answer, with demo :) ..your author array must be sorted in my case ;)

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.authors = [{
    id: "1",
    name: "John"
  }, {
    id: "2",
    name: "Peter"
  }, {
    id: "3",
    name: "Mark"
  }];

  $scope.books = [{
    id: "1",
    id_author: "3",
    name: "Book Lorem"
  }, {
    id: "2",
    id_author: "1",
    name: "Book Ipsum"
  }, {
    id: "3",
    id_author: "1",
    name: "Book Dark"
  }];



}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
  <div ng-repeat="book in books">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{authors[book.id_author -1].name}}</div>
    <hr>
  </div>
</div>

</html>

Collectives™ on Stack Overflow

Angular ng-repeat - how to join or combine data from different arrays

8 Answers 8

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related