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();
    }); 
}

Now I am using two different function names but it still not able to retrieve data from multiple .Its retrieves only from. function find(navisioncustomer) { — Ibrahim İnce
– Ibrahim İnce, Commented Oct 19, 2016 at 12:47

Netham · Accepted Answer · 2016-10-19 10:36:04Z

1

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);

answered Oct 19, 2016 at 10:36

Netham

1,1767 silver badges16 bronze badges

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

4 Comments

Ibrahim İnce Over a year ago

thank you verymuch for your answer. Now I am using two different function names but it still not working. Maybe, I misunderstood what you meant.

Netham Over a year ago

@Ibrahimİnce can you share your code in a jsfiddle?

Ibrahim İnce Over a year ago

I think i solved the problem with using one function and pass uri variable to it. Thankyou.

Netham Over a year ago

@Ibrahimİnce if this helped you, you can accept the answer as others will also know that it works

madalinivascu · Accepted Answer · 2016-10-19 10:41:42Z

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

Ibrahim İnce · Accepted Answer · 2016-10-20 07:29:40Z

    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();
        }); 
        }

Collectives™ on Stack Overflow

retrieving multiple JSON files with jquery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related