Query Json and pass variable?

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>");
    });
});

Why do you think you need to pull the entire query again? Could you provide a bit more code? — Matt Ball
– Matt Ball, Commented Jun 7, 2011 at 14:32
$.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>"); }); }); — mark
– mark, Commented Jun 7, 2011 at 14:39
this brings back everything fine but now I need one product from this passed to another page — mark
– mark, Commented Jun 7, 2011 at 14:40
Right, that's the part I'm wondering about. What do you mean by "passed to another page?" — Matt Ball
– Matt Ball, Commented Jun 7, 2011 at 14:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 7, 2011 at 15:02

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

mark Over a year ago

Wow OK, thanks. What is the best way? If I pass the id then I need to find the data on the next page so your first example seems like the way to go. Is there a tutorial somewhere? This is new to me and I am a little lost. I don't even know where / how to set the data to pass.

Matt Ball Over a year ago

Is the link that you're talking about the one that you create in the $.each()?

mark Over a year ago

Right now I am pulling a link from the json - they don't want that now, they want a new page to display one prodcut and that will link to the url I am using now. Make sense?

mark Over a year ago

If there is a way to pass the id and then pull one product from the json I am using now, it seems like that would be the simpliest way to go.

mark Over a year ago

So if I pass the id - is there a way to use json.filter to grab one record on another page?

|

Collectives™ on Stack Overflow

Query Json and pass variable?

1 Answer 1

Edit

21 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

21 Comments

Your Answer

Sign up or log in

Post as a guest

Related