title: Parse JSON data with jQuery
body: <p>I have a web service which returns this JSON:</p>
  
  <pre><code>[{
      "user_id": "1",
      "user_name": "User1",
      "user_age": "20"
  }, {
      "user_id": "2",
      "user_name": "User2",
      "user_age": "21"
  }, {
      "user_id": "3",
      "user_name": "User3",
      "user_age": "24"
  }, {
      "user_id": "4",
      "user_name": "User4",
      "user_age": "34"
  }, {
      "user_id": "5",
      "user_name": "User5",
      "user_age": "27"
  }]
  </code></pre>
  
  <p>What I want is I want to populate it to some list and also want to get <code>index of list item</code> clicked so that I can retrieve more information according to that index value (<code>user_id</code>). </p>
  
  <p>What I did is: </p>
  
  <pre><code>function fetchFunction() {
      //fn.load('fetchPage.html');
      console.log("fetchFunction is invoked");
  
      var header = "&lt;ons-list-header&gt;My Inset ListTTT&lt;/ons-list-header&gt;";
  
      $.ajax({
          type: 'POST',
          url: "fetchJSON.php",
          timeout: 5000,
          //dataType:'text',
          dataType:'json',
          success: function(data) {
               var data2 = JSON.stringify(data); //to string
               //var data2 = JSON.parse(data); //to string
               console.log("Index of list is: " + data2[0].user_id + " and username is: " + data2.user_name);         
  
               //alert("Index is: " + data[0]); 
               //$("#myListElement").html(header);
               //$("#myListElement").append(data);
  
               // Parse 'data' here
              console.log("SuccessED");
          },
          error: function(err) {
              ons.notification.alert("Error: " + err.status + ", " + err.statusText);
              console.log("Error: " + err);
              // console.log(err.status);
              // console.log(err.statusText);
              // $("#div1").text(err.responseText);
          }
      });
  }
  </code></pre>
  
  <p><code>data2[0].user_id</code> is doing nothing, just returning <code>undefined</code>.</p>
  
  <p>I have a <code>click</code> function on that <code>div</code> called <code>myListElement</code> so I want to show the <code>user_id</code> on which the click function triggered. </p>
  
  <pre><code>if (event.target = "fetchPage2.html") {
          $("#myListElement").click(function(){
              alert("List Item Clicked!");
          });
      }
  </code></pre>
  
  <p>I will love if you give me some idea.</p>
  
  <p>BTW I am using: <strong>Cordova</strong> + <strong>OnSenUI</strong>. :/</p>
  
  <p>Thank You. </p>
  
  <p><strong>PS:</strong> I have this <code>ons-list</code> as a <em>List</em>. and want to populate it here. </p>
  
  <pre><code>&lt;ons-list modifier="inset" id="myListElement"&gt;
      &lt;ons-list-header &gt;My Inset listdc&lt;/ons-list-header&gt;
      &lt;ons-list-item modifier="longdivider" tappable&gt;Item A&lt;/ons-list-item&gt;
      &lt;ons-list-item modifier="longdivider" tappable&gt;Item B&lt;/ons-list-item&gt;
      &lt;ons-list-item modifier="longdivider" tappable&gt;Item C&lt;/ons-list-item&gt;
  &lt;/ons-list&gt; 
  </code></pre>