Untitled

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
  
  <!--
  <link href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" type="text/css" />
  <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.2.min.css" rel="stylesheet" type="text/css" />
  <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
 
  <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
  <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.2.min.js" type="text/javascript"></script>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
  <script src="http://cdn.wijmo.com/external/angular.wijmo.js" type="text/javascript"></script>
  -->
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" type="text/css">
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.css" rel="stylesheet" type="text/css">

<!--link href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" type="text/css" /-->
<!--link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.1.min.css" rel="stylesheet" type="text/css" /-->

<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://cdn.wijmo.com/external/angular.wijmo.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="http://lodash.com/_js/lodash.compat.js"></script>
    
    
    
    
    
    
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
  <h1>
  Using lodash Map to create a Projection on JavaScript Array of Objects
  </h1>
  
  <p>
  Original Array
  </p>
  
    <wijgrid data="{{items}}" allowEditing='true' style="width: 600px;">       
      <columns>
        <column></column>
        <column></column>
        <column></column>
      </columns>
    </wijgrid>
  
  <p>
  New Array Projection using lodash Map function
  </p>
    
    <wijgrid data="{{newItems}}" style="width: 600px;">
      <columns>
        <column></column>
        <column></column>
      </columns>
    </wijgrid>
    
  </body>

</html>

// Code goes here

var app = angular.module("myapp", ["wijmo"]);

var mainCtrl = function ($scope) {

$scope.items =
[
  {
    id: 1,
    name: 'John',
    title: 'Haigh'
  },
  {
    id: 1,
    name: 'John',
    title: 'Haigh'
  }

];


  // lodash map function that creates a projection over existing items array of objects
  $scope.newItems = _.map($scope.items, function(item) { 
    return {
      name: item.name,
      title: item.title
    }; 
  
  });

}

/* Styles go here */