title: Lodash & Angular: Transform JSON object into view model
body: <p>I am trying to find the best way to transform a large JSON object into a view model.  Previously, I had the model incorporated into the view, which is a bad practice.  So, now I have the model being generated inside of a controller.  I am using Lodash as a utility library.</p>
  
  <p>My current design plan is to transform the JSON object into a "master" array that is accessible in the controller's scope.  The JSON file is being served by Express.  <code>ModelService</code> simply gets this file to make it available in the controller.</p>
  
  <p><code>$scope.arr</code> is the "master" array that I want to use in the view.</p>
  
  <p>I also made the JSON data available for viewing at an external link since it is so large. <a href="http://codebeautify.org/jsonviewer/cb2390bc" rel="nofollow">Here it is</a>.</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('app')
          .controller('ModelController', ModelController);
  
      function ModelController($scope, ModelService, _) {
          $scope.jsonData = ModelService.getAll();
  
          $scope.getData = function() {
              $scope.jsonData.$promise.then(function(data) {
                  $scope.all = data;
                  $scope.arr = [];
                  _.mapValues($scope.all.parent1.clusters, function(cluster) {
                      $scope.arr.push(cluster.name);
                      _.mapValues(cluster.subclusters, function(subcluster) {
                          $scope.arr.push(subcluster.name);
                          _.mapValues(subcluster.entities, function(entity) {
                  // map entities
                          })
                      });
                  });
              });
          };
  
          $scope.getData();
      }
  })();
  </code></pre>
  
  <p>This code is just adding <code>cluster</code> and <code>subcluster</code> names to the array.  I'd like the subclusters to be mapped to their parent cluster.  The idea I have for doing this involves transforming each <code>cluster</code> element into its own array, and then adding the subclusters, and then transforming each subcluster into an array in order to map the entities to them.  This seems tedious and inefficient. So, I am looking for a better way to achieve this. </p>
  
  <p>It would be nice if I could add each cluster object to the array in one fell swoop without all the mapping and converting objects to arrays.  Is that possible at all?</p>
  
  <p>The wireframe view looks like <a href="http://imgur.com/giL6jSN" rel="nofollow">this</a>.  The <strong>Flex Cluster Title</strong> is the name of the <code>subcluster</code>, and each number inside of them is an <code>entity</code>.</p>