title: Generating a List and Subsequent Pages from JSON
body: <p>In my project, I have a <code>JSON</code> file. I display the data that is parsed inside a list (<code>ul</code>) under a div with the <code>class</code>, "inner", and show only the name and cost of each product that you can see in my JSON.</p>
  
  <pre><code>{
   "product": [
    {
     "name": "samsung galaxy",
     "image": "https://rukminim1.flixcart.com/image/832/832/mobile/v/z/x/samsung-galaxy-on-nxt-sm-g610fzdgins-original-imaenkzvmnyf7sby.jpeg?q=70",
     "cost": "RS.10,000",
     "detail": "Flaunt your style with the Samsung Galaxy On Nxt. Featuring a drool-worthy body and impressive features, this smartphone is built to perform. Talk to your mom, chat with your friends, browse the Internet - stay connected the way that suits you best - this smartphone is powerful enough to keep up with your busy lifestyle."
    }
   ]
  }
  </code></pre>
  
  <p>When I click on the first product (first list item), I want to show the detail (value detail) of this product in another page from that same <code>JSON</code> object; when I click on the second product, I want that to show in a different page too, but also from that same object.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;jquery&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
  
  
  $.ajax({
       url: 'http://sonsofthunderstudio.in/jj/product.json',
       dataType: 'jsonp',
       jsonpCallback: 'jsonCallback',
       type: 'get',
       crossDomain : true,
       cache: false,
       success: function(data) {
          $(data.product).each(function(index, value) {
              console.log(value);
                  $( ".inner" ).append("&lt;li&gt;"+value.name+"&lt;img src='" + value.image + "'  width='50px' height='50px' / &gt;"+value.cost+"&lt;/li&gt;");  
          });
       }
  });
  
  
  &lt;/script&gt;
  
  
          &lt;div class="inner"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Where can I go from here?</p>