title: How to extract and append objects from an array of objects in JS
body: <p>The question is pretty straight forward. I feel dumb asking this because I'm sure the answer is right in front of me, but anyways here is the question. </p>
  
  <p>I'm given a response data and the JSON is sort of like this:</p>
  
  <pre><code>$scope.testData = [
          {
              food: 'wet',
              animal: [{name: 'cat', value: '1'},
                      {name: 'dog', value: '2'}]
          },
          {
              food: 'dry',
              animal: [{name: 'bird', value: '3'},
                      {name: 'fish', value: '4'}]
          }
      ];
  </code></pre>
  
  <p>The question at hand is how can I pull the nested objects under <code>animal</code> so I can set a string up and and push it with the current food object for example:</p>
  
  <p>I would take out the animal: names
  so under object with <code>food: 'wet'</code> I would take out animal: </p>
  
  <pre><code>[{name: 'cat', value: '1'},
   {name: 'dog', value: '2'}]
  </code></pre>
  
  <p>Then I would take the object names 'cat' and 'dog' put into a string like cat, dog and then push the new values into a new array of objects that look like this</p>
  
  <pre><code>$scope.newData = [
          {
              food: 'wet',
              animalType: 'cat, dog'
          },
          {
              food: 'dry',
              animalType: 'bird, fish'
          }
      ];
  </code></pre>
  
  <p>This is all done so I can have a cleaner UI grid </p>