Question

I am pulling data with $.getJSON and displaying it in a div. I thought I would have another json query to get one product but I don’t so I was wondering of there is anyway to query the results or just grab a few variables to pass? I need to pass one record to another page. I found this on this site:

var people = json.filter(function(el)
{          
   return el.Phoneno.some(function(number)
   {
       return number.Cell == "777-777-7777";     
   });
}); 

Seems like I need to pull the entire query again though and parse through it. Is there away to just pass a few variables to another page? Very new to jQuery, if someone could point me it right direction that would be great, thanks for any help!

UPDATE:

$.getJSON("myurl", function(data){
   $.each(data.myproducts, function(i,item){
      $("#products").append("<li><a href='"+item.Url+"' target='_top'><img src='"+item.image+"'></a>"
                           +"<br>"+item.Name+"<br>"+"$"+item.saleprice+"</li>");
    });
});

Answer 1

You can pass a JavaScript object:

var data = {
    url: 'http://example.com',
    image: 'http://placekitten.com/200/300',
    name: 'can haz cheezburger?'
};

through a URL query parameter by serializing it to JSON:

var strData = JSON.stringify(data);
// '{"url":"http://example.com","image":"http://placekitten.com/200/300","name":"can haz cheezburger?"}'

and then URL-encoding it:

var encodedStrData = encodeURIComponent(strData);
// '%7B%22url%22%3A%22http%3A%2F%2Fexample.com%22%2C%22image%22%3A%22http%3A%2F%2Fplacekitten.com%2F200%2F300%22%2C%22name%22%3A%22can%20haz%20cheezburger%3F%22%7D'

and then adding it to the query string of a URL. If you have an anchor like this:

<a id="next" href="next/page">Next Page</a>

you can modify it with jQuery like this:

var $next = $('#next'),
    url = $next.prop('href') + '?data=' + encodedStrData;

$next.prop('href', url);

The receiving page will then have to unpack the data in the URL, if present.

---

…or you could just pass some sort of item ID:

<a href="next/page?item=42">Next Page</a>

---

Edit

Try this, which uses $.param(...) instead of encodeURIComponent(JSON.stringify(...)):

$.getJSON("myurl", function(data)
{
    $.each(data.myproducts, function(i,item)
    {
        var url = 'details.html?' + $.param({data: item});
       
        $("#products").append("<li><a href='"+url+"' target='_top'><img src='"+item.image+"'></a>"
               +"<br>"+item.Name+"<br>"+"$"+item.saleprice+"</li>");
    });
});

_{This can definitely be cleaned up, but I’ve left it as similar to the original code as possible for clarity. CodeReview.SE is a great resource for improving correct code.}

Then, on the receiving page, you need to grab the value of the data parameter. I recommend using jQuery BBQ for that:

$(function ()
{
    var item = $.deparam.querystring().data;
    // Item is now one of the items from the JSON on the previous page.
    // Do whatever you need with it
});