JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app='MyModule' ng-controller="MyController">
    <h1>Basic</h1>
    <p ng-repeat='b in basic'>{{b | json}}</p>
    <h1>Ext</h1>
    <p ng-repeat='e in ext'>{{e | json}}</p>
    <h1>Combined</h1>
    <p ng-repeat='c in combined'>{{c | json}}</p>
    <h1>Combined with hash</h1>
    <p ng-repeat='c in combinedWithHash'>{{c | json}}</p>
</div>

JavaScript

angular.module('MyModule', [])

.controller('MyController', function( $scope ) {
    
    var basic = [
        { id: '1', name: 'someName' },
        { id: '2', name: 'someName2' },
        { id: '3', name: 'someName3' },
    ];
        
    var ext= [
        { id: '1', job: 'someJob' },
        { id: '3', job: 'someJob3' }
    ];		

    
    var extHash = _.reduce($scope.ext, function(memo, extended, key){
        memo[extended.id] = extended;
        return memo;
    }, {});

    $scope.combined = _.map(basic, function(base){
        return _.extend(base, _.findWhere(ext, { id: base.id} ));
    });
    
    $scope.combinedWithHash = _.map(basic, function(base){
        return _.extend(base, extHash[base.id]);
    });
    
    $scope.basic = basic;
    $scope.ext = ext;
});