Question

我有以下网址：

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

我希望匹配URL字符串中的'number'参数，并仅显示与其关联的JSON数据，因此在这种情况下，我只想渲染JSON数组中的第一个对象。

这是JSON结构：

{
"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"
    }
  ]
}

我试图编写JS但是我很难只显示与数字相关的值。还是一个菜鸟，所以你的帮助将不胜感激！

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

Answer 1

在AJAX调用的成功函数中，您需要检查数字是否匹配，然后存储该对象以供以后使用：

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
}

为清楚起见，这里是我的代码适合你的地方：

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

Answer 2

您需要将HTML呈现给#load div，如下所示：

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 - $（'#load'）。fadeOut（）导致内容显示出现问题，所以我从这个例子中删除了它。

这是一个显示它正常工作的小提琴：https://jsfiddle.net/uyw3j2c7/

使用JQuery和AJax在JSON中显示选择值

2 个答案: