retrieving multiple JSON files with jquery

Question

I want to retrieve data from multiple json files.I am able to append data to the table from one of the json file. But when I wanted to pull the data from multiple json files it wont work. My code is:

var uri = 'sharepointmodel.json';
var uri2 = 'navisioncustomer.json';

function find(sharepointmodel) {
    var info = $('#KUNDE').val()
    $("#loader").show();
    $.getJSON(uri).done(function (data) {                       
        var item = data.filter(function (obj) {
            return obj.name === info || obj.ID === info;
        })[0];

        if (typeof item ==='undefined'){
            alert("Ukendt navn eller ID");
        }
        else if (typeof item !== 'undefined' || item !== null) {                              
            $("table.table").append("<tr><td> " + item.name + item.url + "</td></tr>");
        }                                                
    }).fail(function (jqXHR, textStatus, err) {                     
            $('#ERROR').text('Kan ikke oprette forbindelse til serveren!');
    }).always(function (){
        $("#loader").hide();
    }); 
} 

function find(navisioncustomer) {
    var info2 = $('#KUNDE').val()
    $("#loader").show();
    $.getJSON(uri2).done(function (data) {                       
        var item = data.filter(function (obj) {
            return obj.name === info2 || obj.ID === info2;
        })[0];

        if (typeof item ==='undefined'){
            alert("Ukendt navn eller ID");
        }
        else if (typeof item !== 'undefined' || item !== null){                              
            $("table.table2").append("<tr><td> " + item.name + item.phone + "</td></tr>");
        }                                                
    }).fail(function (jqXHR, textStatus, err) {                     
        $('#ERROR').text('Kan ikke oprette forbindelse til serveren!');
    }).always(function (){
        $("#loader").hide();
    }); 
}

Answer 1

    var uri1 ='http://';
    var uri2 ='http://';           
    function find() {
    var info1 = $('#KUNDE').val()
        $("#loader").show();
    $.getJSON(uri2) .done(function (data) {            
    var item = data.filter(function (obj) {
    return obj.name === info1 || obj.ID === info1;
        })[0];
    if (typeof item !== 'undefined' || item !== null) {                 
        $("table.table").append("<thead><tr><th>Name</th><th>SP-Mapper</th></tr></thead>");                                                        
        $("table.table").append("<tr><td> " + item.name +" </td><td><a href='https://"+item.url+ "'target='_blank'><i class='glyphicon glyphicon-file'></i></a>"+"</td></tr>");
        }                                 
        }).fail(function (jqXHR, textStatus, err) {                     
        $('#ERROR').text('Kan ikke oprette forbindelse til serveren! '/* + err*/);}).always(function (){$("#loader").hide();
        }); 
    var info2 = $('#KUNDE').val()
        $("#loader").show();
    $.getJSON(uri1).done(function (data) {        
        var item = data.filter(function (obj) {
    return obj.name === info2 || obj.ID === info2;
        })[0];
    if (typeof item !== 'undefined' || item !== null) {                
        $("table.table2").append("<tr><td>ID      = " + item.ID + "</td><td>Name    = " + item.name + "</td><td>Phone      = " + item.phone + "</td><td>Contact       = " + item.contact + "</td><td>BalanceLCY      = " + item.balanceLCY + "</td><td>CreditLimitLCY       = " + item.creditLimitLCY + "</td></tr>");
        }                                 
        }).fail(function (jqXHR, textStatus, err) {                     
        $('#ERROR').text('Kan ikke oprette forbindelse til serveren! '/* + err*/);}).always(function (){$("#loader").hide();
        }); 
        }

Answer 2

You you have 2 function with the same name,refactor your code as the following:

  var uri = 'sharepointmodel.json';
    var uri2 = 'navisioncustomer.json';   
    function find(uri,callback) {
        var info = $('#KUNDE').val()
            $("#loader").show();
            $.getJSON(uri).done(function (data) {                       
        var item = data.filter(function (obj) {
            return obj.name === info || obj.ID === info;
            })[0];
            if (typeof item ==='undefined'){
                alert("Ukendt navn eller ID");
            }
            else if (typeof item !== 'undefined' || item !== null){                              
           callback(item);

            }                                                
            }).fail(function (jqXHR, textStatus, err) {                     
                $('#ERROR').text('Kan ikke oprette forbindelse til serveren!');
            }).always(function (){$("#loader").hide();
            }); 
            } 

To call the functions do:

find(uri,function(item){
 $("table.table").append("<tr><td> " + item.name + item.url + "</td></tr>");
});
find(uri2,function(item){
$("table.table2").append("<tr><td> " + item.name + item.phone + "</td></tr>");
});

Answer 3

Both of your function names are same, find(). That's why just one function is getting called and your data is getting appended from only one file.

Either have different function names or have one function and pass uri variable to it e.g.

  function find(json_uri) {
    var info = $('#KUNDE').val()
    $("#loader").show();
    $.getJSON(json_uri).done(function(data) {
        var item = data.filter(function(obj) {
            return obj.name === info || obj.ID === info;
        })[0];
        if (typeof item === 'undefined') {
            alert("Ukendt navn eller ID");
        } else if (typeof item !== 'undefined' || item !== null) {
            $("table.table").append("<tr><td> " + item.name + item.url + "</td></tr>");

        }
    }).fail(function(jqXHR, textStatus, err) {
        $('#ERROR').text('Kan ikke oprette forbindelse til serveren!');
    }).always(function() {
        $("#loader").hide();
    });
}

To append data to both you will have to make two calls

find(uri);
fin(uri2);