-1

I am trying to save data from a link in JSON format and pass that data to the Bootstrap table but its not working properly

I can see the data in console and if I use data-url than it works fine but I want to save data in a variable and use that data in table.

Here is the jsfiddle

If I use this code than it works fine, but I want to save data into a variable first and than assign it to table.

$.get("https://api.github.com/users/wenzhixin/repos", function(data){
    $('#table').bootstrapTable({
        data: data
    });
});
halfer
  • 19,824
  • 17
  • 99
  • 186
Mike Ross
  • 2,942
  • 5
  • 49
  • 101

2 Answers2

1

Just change your jQuery code with following :-

var jsonData;

$.ajax({
    async: false,
    dataType: "json",
    url: "https://api.github.com/users/wenzhixin/repos",
    success: function(result) {
        jsonData = result;
    }
});

$(function () {
        $('#randomTable').bootstrapTable({data: jsonData});
});

function queryParams() {
    return {
        type: 'owner',
        sort: 'updated',
        direction: 'desc',
        per_page: 100,
        page: 1
    };
}

I have stored the Ajax response data into one variable and then add SetTimeout while assigning the data to bootstrap table.

It may help you.

Harsh Sanghani
  • 1,666
  • 1
  • 14
  • 32
  • and also removed the one extra ajax call. Let me know its helpfull to you or not. – Harsh Sanghani May 27 '16 at 10:30
  • This is not a solution its a workaround.. If the ajax request takes more than 1 sec (1000) this solution wont work – Rajshekar Reddy May 27 '16 at 10:34
  • @Reddy I have not added only setTimeout also change the function, Please see before making vote. – Harsh Sanghani May 27 '16 at 10:37
  • @reddy ok so what should i do here? is there any other way?? – Mike Ross May 27 '16 at 10:40
  • @MikeRoss what is the idea behind storing the value in a variable and then assigning it to the table? any plan of reusing the data? – Rajshekar Reddy May 27 '16 at 10:40
  • @Reddy If You remove the settimeout from the my answer then also It works, Because I have change the code in function also. – Harsh Sanghani May 27 '16 at 10:42
  • So there is setTimeout doesn't matter – Harsh Sanghani May 27 '16 at 10:42
  • @Reddy what OP trying to is set full AJAX call in one variable and then set this variable to the bootstrap datatable which is wrong, So I just make that correct and it's work. – Harsh Sanghani May 27 '16 at 10:43
  • @Reddy You are just useless async : false is from the OP, I have not added , Please check atleast jsfiddle. – Harsh Sanghani May 27 '16 at 10:45
  • @Reddy yes i want to reuse the data for filtering purpose so i dont have to make call to api for filtering purpose. thats why i want to store it in a variable – Mike Ross May 27 '16 at 10:45
  • @MikeRoss ok I understand. let me provide a solution. – Rajshekar Reddy May 27 '16 at 10:46
  • @reddy i only want to store the data in JSON format in any variable so i can use it for filtering purpose later on and dont have to make server call. – Mike Ross May 27 '16 at 10:47
  • @MikeRoss can you just tell me what is the problem with this answer? is there any problem? – Harsh Sanghani May 27 '16 at 10:51
  • @HarshSanghani no problem just want to know which one is efecient for my website thats all. Can you justify why your answer is more suitable that his answer? – Mike Ross May 27 '16 at 10:56
  • @HarshSanghani just by downvoting my answer doesn't make your answer any better. – Rajshekar Reddy May 27 '16 at 10:58
  • What he is done store result variable in jsonDataCall and then set jsonDataCall to bootstrap table, You can directly stored the result variable to the bootstrap datatable. – Harsh Sanghani May 27 '16 at 10:58
  • @Reddy I am not interested to vote your answer, So there is not point of negative, I like to help others only. – Harsh Sanghani May 27 '16 at 11:00
  • `*What he is done store result variable in jsonDataCall and then set jsonDataCall to bootstrap table, You can directly stored the result variable to the bootstrap datatable.*` if he directly sets the result variable into the table how can he reuse the data? which is what the OP is trying to acheive. – Rajshekar Reddy May 27 '16 at 11:12
1

Since you mentioned the only idea to store the data into a variable is for re-useablity you can do below. Working Fiddle

   var jsonDataCall ;      // keep a global variable in the scope.

   $(function() { 
    $.get("https://api.github.com/users/wenzhixin/repos", function(result){
        jsonDataCall = result;   // save it to a variable for later use
        $('#table').bootstrapTable({
            data: jsonDataCall   // use the same variable to build the table
        });
    });
   });

By the way async is deprecated and you shouldn't be using it anymore more details here and here

Explaining problem in your code provided in jsfiddle:

var jsonDataCall = $.getJSON("https://api.github.com/users/wenzhixin/repos", function(result){
        jsonDataCall =result;
    });

var jsonData = $.ajax({    // this variable is not used anywhere in the code.
        async: false,
        dataType: "json",
        url: "https://api.github.com/users/wenzhixin/repos",
        success: function(result) {
            jsonData = result;
        }
    });

$(function () {
      var $table = $('#randomTable').bootstrapTable({data: jsonDataCall});
 });

This line var $table = $('#randomTable').bootstrapTable({data: jsonDataCall}); kicks off on document ready. And here we have jsonDataCall which will access the value in it. But in the first line you have assigned a ajax method to this variable and not a value. So the in the above line data: jsonDataCall will try to assign the ajax function to data variable it does not assign the value returned from server because it comes later after the ajax success has executed.

Solution: When ever you are dealing with ajax calls you must make sure all the code that depends on the returned server result should kick off in the ajax success else you are in trouble.

Community
  • 1
  • 1
Rajshekar Reddy
  • 18,647
  • 3
  • 40
  • 59