無法從JSON字符串中選擇特定ID

Question

所以我試圖建立一個包含一些客戶信息的管理頁面，而我卻無法從客戶中選擇ID來在單獨的頁面中顯示他的所有信息，因此出現了這個問題。

基本上，在第一頁site.com/client我有一張包含所有客戶端的小表，當我單擊按鈕進行可視化時，我將轉到site.com/det_client&cliId=3頁面，其中包含所有信息。

此信息位於JSON文件中，每個客戶端都有唯一的ID 。 該ID從第一頁發送到第二頁，然后轉到URL，而我使用jquery獲取此數據。 直到這部分沒問題。 我可以做所有事情，還可以從客戶那里獲得正確的ID 。

當我需要用該特定ID所有信息編寫新表時，問題就開始了。 我試圖看這里（在stackoverflow中），但是我發現的解決方案給了我錯誤。 這是我正在使用的代碼：

$(document).ready(function() {
    var url = "data/c_fisico.json";
    var cli; //getting the client id from the url. rest of the code is in other page

    $.getJSON( url, function() {
        function findId(url, idToLookFor) {
            var categoryArray = url.aaData;
            for (var i = 0; i < categoryArray.length; i++) {
                if (categoryArray[i].cd == idToLookFor) {
                    return(categoryArray[i].id);
                }
            }
        }
    });

    var item = findId(url, cli),
        table = JSON.parse(item);

    //there is more data, but i made it smaller
    $.getJSON(table, function (response){
        var write;
        $.each (response, function (index, table) {
            write += '<tr><td>Cod</td><td>' + table.id + '</td></tr><tr><td>Name</td><td>' + table.nm_cliente + '</td></tr><tr><td>cpf</td><td>' + table.cpf + '</td></tr>';
        }); //end each
        $('#TableTest').html(write);
    }); //end getJSON

});

我的錯誤是： Uncaught ReferenceError: findId is not defined

這是我的JSON的示例：

{
    "aaData": [
        {
            "id":0,
            "cd":"C-0001",
            "nm_cliente":"John",
            "cpf":"000.111.222-33",
            "nm_pai":"Nome Completo",
            "nm_mae":"Nome Completo",
            "tel":"00-9966-6699",
            "cidade":"city",
            "estado":"estate"
        },
        //rest of my code here...
    ]
}

因此，基本上，我需要從具有URL給出的相同ID的客戶端獲取所有信息，然后將其寫在頁面上以顯示該特定客戶端的所有詳細信息。

Answer 1

您的問題與函數范圍有關：findId（）是在傳遞給jQuery.getJSON（）的回調中定義的，而不是在$（document）.ready（）的回調中定義的。

編輯：這應該大致是您要執行的操作：

$(document).ready(function() {
  var url = "data/c_fisico.json";
  var cli; //getting the client id from the url. rest of the code is in other page

  $.getJSON(url, function(data) {
    var rows = '';
    data.aaData.forEach(function(aa) {
      rows += '<tr><td>Code</td><td>' + aa.cd + '</td></tr>' +
        '<tr><td>Name</td><td>' + aa.nm_cliente + '</td></tr>' +
        '<tr><td>cpf</td><td>' + aa.cpf + '</td></tr>';
    });
    $('#mytable').html(rows);
  });
});

我不是直接構建這樣的HTML的忠實粉絲（通常像ReactJS一樣，或者只是在最壞的情況下構建dom），但是那是您以前擁有的，所以我保持相同的方法。

Answer 2

您需要將代碼放入$.getJSON的回調中（並且實際上並不需要findId函數）。 否則，您需要實現一個回調函數（即，發出獲取數據的請求，然后異步方法在完成后調用外部函數）。

如果您只需要加載一個ID，則類似...

$(document).ready(function() {
    var url = "data/c_fisico.json";
    var cli; //getting the client id from the url. rest of the code is in other page

    $.getJSON( url, function(json_data) {
        var categoryArray = json_data.aaData;
        for (var i = 0; i < categoryArray.length; i++) {
            if (categoryArray[i].cd == cli) {
                writeItem(categoryArray[i]);  //Pass the matching object to writeItem.
                return;
            }
        }
    }); 
});

function writeItem(item) {
    //"item" has already been parsed to an object, it's no longer a JSON string.
    var write += '<tr><td>Cod</td><td>' + item.cd + '</td></tr><tr><td>Name</td><td>' + item.nm_cliente + '</td></tr><tr><td>cpf</td><td>' + item.cpf + '</td></tr>';
    $('#mytable').html(write);
}

如果您需要寫多個行（多個ID，也許通過單擊按鈕）， 而無需為每個調用更新數據集，則類似...

var my_data = null;

$(document).ready(function() {
    var url = "data/c_fisico.json";

    //You should add error handling in here, so you know if the JSON file wasn't available.
    $.getJSON( url, function(json_data) {
        my_data = json_data.aaData;
        $("#some_button").attr("disabled", false);  //JSON data has loaded, so enable our button.
    });

    $("#some_button").attr("disabled", true);  //Disable our button so the user can't click it until JSON is loaded.
    $("#some_button").on("click", function() {
        var id = //Figure out what ID you want to load here.

        writeItem(id);  //Call the write function.
    });
});

function findId(id) {
    if (my_data === null) { return null; }  //JSON hasn't been retrieved yet, so we can't find anything.

    for (var i = 0; i < my_data.length; i++) {
        if (my_data[i].cd == id) {
            return my_data[i];
        }
    }

    return null;  //The requested ID wasn't found.
}



function writeItem(id) {
    var item = findId(id);
    if (item === null) {
        //The ID wasn't found or JSON isn't available.
        //Show error message or whatever you'd like.
        return;
    }

    var write = '<tr><td>Cod</td><td>' + item.cd + '</td></tr><tr><td>Name</td><td>' + item.nm_cliente + '</td></tr><tr><td>cpf</td><td>' + item.cpf + '</td></tr>';
    $('#mytable').append(write);  //Appends to existing table data.
}

最后，如果您需要加載多個ID，而且每次都需要從數據源重新加載，例如...

var busy = false;


$(document).ready(function() {
    var url = "data/c_fisico.json";

    //You should add error handling in here, so you know if the JSON file wasn't available.
    $.getJSON( url, function(json_data) {
        my_data = json_data.aaData;
        $("#some_button").attr("disabled", false);  //JSON data has loaded, so enable our button.
    });

    $("#some_button").on("click", function() {
        var id = //Figure out what ID you want to load here.

        findId(id, writeItem);  //Call the find function and tell it to call the write function when done.
    });
});


function findId(id, callback) {
    if (busy) { return; }  //Don't call again if we're already in the process of another call.
    busy = true;

    $.getJSON( url, function(json_data) {
        var categories = json_data.aaData;
        for (var i = 0; i < categories.length; i++) {
            if (categories[i].cd == id) {
                //Item was found, so pass the object to our callback.
                callback(categories[i]);
                busy = false;  //You should also set busy = false if the getJSON call fails.
                return;
            }
        }

        //ID wasn't found.  Error message.
        busy = false;  //You should also set busy = false if the getJSON call fails.
    });
}


function writeItem(item) {
    //Gets called by findId as a callback function.

    var write = '<tr><td>Cod</td><td>' + item.cd + '</td></tr><tr><td>Name</td><td>' + item.nm_cliente + '</td></tr><tr><td>cpf</td><td>' + item.cpf + '</td></tr>';
    $('#mytable').append(write);  //Appends to existing table data.
}

請注意，示例中沒有處理錯誤條件。 我將由您和您的實現來決定！

Answer 3

使用http://www.jinqJs.com上的開源項目jinqJs，您可以做到這一點。

var result = jinqJs().from('http://....').where('id = ' + cli).select();