Display JSON values based on param string value

Question

Any help would be greatly appreciated!

Here's what I've done so far.

I have an index.html page and a notice-details.html page. On the index.html page, I have a data grid and I'm displaying 'title' from the json file. I hyperlinked the title to details.html and also added the 'number' so each title href is unique. The data template for the linked title in the data grid is looking like this:

<a href="notice-details.html?id={{number}}">{{title}}</a>

On notice-details.html page I'm trying to capture the query string parameter and display the associated key value pairs that match the 'number' in the json array. So if I land on notice-details.html?id=2012-01 I want to display on that page the title, award claim due date, award claim forms, and date posted associated to the 2012-001 in the json.

I'm stuck on how to match the number and querying only the matched content.

JSON:

{
"notices": [
    {
        "number": "2012-001",
        "link": "google.com",
        "title": "sample title",
        "awardClaimDueDate": "",
        "awardClaimForms": "",
        "datePosted": "1/31/2012"
    },
    {
        "number": "2012-001",
        "link": "google.com",
        "title": "sample title",
        "awardClaimDueDate": "",
        "awardClaimForms": "",
        "datePosted": "1/31/2012"
    }
  ]
}

JS:

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

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

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

Can you restructure your JSON or add another JSON that is better structured for your lookup use case? Also, are the notice numbers not unique? — Mike Brant
– Mike Brant, Commented Jul 22, 2015 at 13:47

Mike Brant · Accepted Answer · 2015-07-22 20:48:09Z

1

I would personally make available a 2nd JSON data structure that allows you to make a lookup based on the notice number rather than have to iterate over an array of notices as you would have to do with your current data structure. For example, if you had JSON structured like this:

{
    "2012-001": {
        "number": "2012-001",
        "link": "google.com",
        "title": "sample title",
        "awardClaimDueDate": "",
        "awardClaimForms": "",
        "datePosted": "1/31/2012"
    },
    "2012-002": {
        "number": "2012-002",
        "link": "yahoo.com",
        "title": "another title",
        "awardClaimDueDate": "",
        "awardClaimForms": "",
        "datePosted": "3/31/2012"
    },
    ...
}

Then you could easily lookup your data from the object created from the JSON like this (assuming this new JSON file is called noticesByID.json):

var noticeParamID = getParameterByName('id');
// get notice based on this id
$.getJSON('noticesByID.json',function(data){
    var notice = data[noticeParamID];
    // do something with the notice
    // let's say we are updating DOM element with id's the same as notice keys
    for (propKey in notice) {
        $('#'+propKey).html(notice[propKey]);
    }
}

You should really strongly consider this approach, as you have already noted you have 1K+ notices that, without a proper data structure to support lookup by notice number, you would have to iterate through to find the notice you were interested in. Your performance would continue to get worse the more notices you have with the iteration approach (it has O(n) complexity where n is number of notices). With the approach I have presented here, you would always have an O(1) operation.

I would also begin to think about whether you really, truly need to make this data available via static JSON files. This requires you to download the entire file just so the use can get to a single record. That is a lot of wasted bandwidth and potential response lag in the UI. If you are going for a fully static site, perhaps you have to live with this or think about making a bunch of individual JSON files (i.e. 2012-011.json) to minimize download. Alterantely if you already have a dynamic site or are not opposed to a dynamic site, then you could look at databases and other things that could simplify your data lookup problems.

Per comments, here is suggestion on converting existing JSON to new JSON format needed for this approach:

var sourceJSON = '{"notices":...}'; // your source JSON
var sourceObj = JSON.parse(sourceJSON);
var notices = sourceObj.notices;
var targetObj = {}; // the target object you will load notice data into

// fill targetObj with data structure you want
for(i = 0; i < notices.length; i++) {
    // we use the `number` property of the notice as key
    // and write the whole notice object to targetObj at that key 
    targetObj[notices[i].number] = notices[i];
}

// create new JSON from targetObj
newJSON = JSON.stringify(targetObj);

edited Jul 22, 2015 at 20:48

answered Jul 22, 2015 at 14:04

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

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

4 Comments

Hectooorr Over a year ago

I would have to maintain 2 files? I can update the json with excel and export back out. The downside is that I am retrieving the json file from the customer. Also this is a temporary solution for a small project that is also getting a major face lift in phase 2 later this year.

Mike Brant Over a year ago

@Hectoor Yes this would mean two files. It should be trivial to build a script to create the JSON file in the format you need for notice-id-based look up from the original JSON file - only a few lines of code.

Hectooorr Over a year ago

Thus far it hasn't been "trivial". Thank you for your suggestions though.

Mike Brant Over a year ago

@Hectooorr It actually is pretty trivial. I just added a suggested approach to make this JSON structure conversion to my answer.

Collectives™ on Stack Overflow

Display JSON values based on param string value

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related