title: Querying Nested JSON
body: <p>I have some JSON data that's formatted like this:</p>
  
  <pre><code>{
      "id": "ABC123",
      "offerPrice": 42.00,
      "regularPrice": 42.00,
      "variations": [{
          "key": "Style",
          "value": "Black"
      }, {
          "key": "Personalization",
          "value": "2 Lines of Personalization"
      }]
  }, {
      "id": "987ZYX",
      "offerPrice": 52.00,
      "regularPrice": 52.00,
      "variations": [{
          "key": "Style",
          "value": "Black"
      }, {
          "key": "Personalization",
          "value": "3 Lines of Personalization"
      }]
  }
  </code></pre>
  
  <p>What I need to do is query for values inside of the 'variations' array and return the object if a match is found.</p>
  
  <p>I'm able to query the 'first level' of values just fine:</p>
  
  <pre><code>var results = jQuery.grep(obj, function (element, index) {
      return element.offerPrice == "42.00";
  });
  </code></pre>
  
  <p>and I can query for variations if I specify an index value (which I obviously don't want to do):</p>
  
  <pre><code>var results = jQuery.grep(obj, function (element, index) {
      return element.variations[1].key == "Personalization" &amp;&amp; element.variations[1].value == "2 Lines of Personalization";
  });
  </code></pre>
  
  <p>This is ideally what I want to do, but it doesn't work:</p>
  
  <pre><code>var results = jQuery.grep(obj.variations, function (element, index) {
      return element.key == "Personalization" &amp;&amp; element.value == "2 Lines of Personalization";
  });
  </code></pre>
  
  <p>I keep getting:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined
  </code></pre>
  
  <p>Here's a jsFiddle:  <a href="http://jsfiddle.net/VzqWW/3/" rel="nofollow">http://jsfiddle.net/VzqWW/3/</a></p>
  
  <p>Any ideas?</p>