Json array issue on binding to bootstrap datatable

Question

I am having a json object like the one below which I am reading from an xml file. I can see on the alert that the json obj is being displayed.

Now that I have the json object I am trying to bind against a Bootstrap datatable like in this example How to load JSON data into Bootstrap table?

Whatever I tried the bootstrap table won't get populated. I think is because my json object contains the "book", which is the object name while the example from the link above has just a Json array. However I tried to do book.author and it still not working.

This is my plnk attempt, if anyone can have a look and tell what I am doing wrong would be great. https://plnkr.co/edit/h9islDjHyz6Sxkhl

        {
      "book": [
        {
          "author": "Gambardella, Matthew",
          "title": "XML Developer's Guide",
          "genre": "Computer",
          "price": "44.95",
          "publish_date": "2000-10-01",
          "description": "An in-depth look at creating applications \n      with XML.",
          "id": "bk101"
        },
        {
          "author": "Ralls, Kim",
          "title": "Midnight Rain",
          "genre": "Fantasy",
          "price": "5.95",
          "publish_date": "2000-12-16",
          "description": "A former architect battles corporate zombies, \n      an evil sorceress, and her own childhood to become queen \n      of the world.",
          "id": "bk102"
        }
      ]
    }


    var $table = $('#table');
        var mydata = "";
    
    //read data from XML
    $.get('hello.xml', function(xml) {
          var json = $.xml2json(xml);
          console.log(json);
          // This part is for displaying the json result  in this example
          var jsonAsString = JSON.stringify(json, null, 2);
          setJsonVal(jsonAsString);
        });
    
    
    //set mydata variablle with the json obj from XML
    function setJsonVal(value){
      mydata = value;
      alert(value)
    }

$(function () {
    $('#table').bootstrapTable({
        data: mydata
    });
});

score 0 · Accepted Answer · answered Nov 08 '20 at 20:16

You need to use JSON.parse() to convert the value to json and then you can access the book by using .book.

function setJsonVal(value){

    mydata = JSON.parse(value).book;
    alert(value)

    $('#table').bootstrapTable({
        data: mydata 
    });
}

Json array issue on binding to bootstrap datatable

1 Answers1