Display select values in JSON using JQuery and AJax

Question

I have the following url:

http://domain.com/details.aspx?number=2012-001

I want to match the 'number' param in the URL string and display only the JSON data associated to it so in this case I only want to render the first object within the JSON array.

Here's the JSON structure:

{
"notices": [
    {
        "number": "2012-001",
        "link": "www.google.com",
        "title": "sample title",
        "awardClaimDueDate": "3/1/2015",
        "awardClaimForms": "abc.pdf",
        "datePosted": "1/31/2012"
    },
    {
        "number": "2012-002",
        "link": "www.yahoo.com",
        "title": "sample title",
        "awardClaimDueDate": "4/3/2015",
        "awardClaimForms": "file.doc",
        "datePosted": "2/3/2012"
    }
  ]
}

I've attempted to write the JS but I'm having difficulty displaying only the values associated to the number. Still a noob so your help would be appreciated!

function jsonParser(json){
$('#load').fadeOut();
$.getJSON('notices.json',function(data){

    // Parse ID param from url
    var noticeParamID = getParameterByName('number');

    $.each(data.notices, function(k,v){
        var noticeNumber = v.number,
            noticeTitle = v.title,
            claimDueDate = v.awardClaimDueDate,
            claimForms = v.awardClaimForms,
            date = v.datePosted;

            if(noticeParamID == noticeNumber){
                // how can I display content that matches the url param value (noticeURLNumber)?
           }
    });
});
}
// get URL parameter by name
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Construct an HTML string containing the values from the JSON, and use $("#someDIV").html(content); to display it. What's the problem? — Barmar
– Barmar, Commented Jul 23, 2015 at 1:26
I want to match the param 'number' to the correct object and only display the values within that object. — Hectooorr
– Hectooorr, Commented Jul 23, 2015 at 1:27

Steven Moseley · Accepted Answer · 2015-07-23 01:35:19Z

1

You need to render the HTML to the #load div, per below:

function jsonParser(json) {
$.getJSON('notices.json',function(data){

    // Parse ID param from url
    var noticeParamID = getParameterByName('number');

    $.each(data.notices, function(k,v){
        var noticeNumber = v.number,
            noticeTitle = v.title,
            claimDueDate = v.awardClaimDueDate,
            claimForms = v.awardClaimForms,
            date = v.datePosted;

            if (noticeParamID == noticeNumber) {
                // display content 
                var noticeHtml = '<h1>' + noticeNumber + '</h1>' +
                            '<h2>' + noticeTitle + '</h2>...';
                $('#load').html(noticeHtml).show();
           }
    });
});
}
// get URL parameter by name
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// Run it
jsonParser();

PS - the $('#load').fadeOut() was causing issues with the display of the content, so I removed it from this example.

Here's a fiddle showing it working: https://jsfiddle.net/uyw3j2c7/

answered Jul 23, 2015 at 1:35

Steven Moseley

16.4k4 gold badges43 silver badges50 bronze badges

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

3 Comments

Hectooorr Over a year ago

dang! perfection! Thank you very much!

Steven Moseley Over a year ago

PS - You can significantly improve this thing for performance. I strongly suggest you look into building a RESTful API and doing the data-filtering on the server-side rather than on the client. If your notices.json file gets large (100, 1000 notices??) this app will perform terribly as it's currently designed!

Hectooorr Over a year ago

@SteveMoseley I agree. Right now we have about 1k records. The current solution isn't great at all. It's a 2 page website. In parallel we are building another solution and storing the data in a SQL db. That's planned to start in about a week and to be released later this year. In addition to your help, thank you for providing insight into that performance issues!

Nick Coad · Accepted Answer · 2015-07-23 01:32:32Z

1

In your success function for the AJAX call, you'll want to check that the number matches and then store the object for later use:

var noticeToDisplay = null;

$.each(data.notices, function(k,v){
    var noticeNumber = v.number;

    if(noticeParamID == noticeNumber){
        // We've found a match, let's grab it!
        noticeToDisplay = v;
    }
});

if (noticeToDisplay != null)
    console.log(noticeToDisplay.link); // output the notices "link" property to the console
    // From this point you can do whatever you like with your noticeToDisplay
}

For clarity, here's where my code fits in with yours:

function jsonParser(json){
    $('#load').fadeOut();

    $.getJSON('notices.json',function(data){

        // Parse ID param from url
        var noticeParamID = getParameterByName('id');

        // MY CODE GOES HERE
    });
}

// get URL parameter by name
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

edited Jul 23, 2015 at 1:32

answered Jul 23, 2015 at 1:30

Nick Coad

3,7145 gold badges39 silver badges64 bronze badges

2 Comments

Hectooorr Over a year ago

Thank you for your quick help on this!

Nick Coad Over a year ago

No problem, glad I could help :)

Collectives™ on Stack Overflow

Display select values in JSON using JQuery and AJax

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related