Populate Bootstrap Table with data from json source

Question

I,m new in working with bootstrap and json files and I came to the following problem:

I've got the following code:

<div class="container">

  <h1 class="text text-success text-center ">Kontoauszug</h1>

  <table id="table" data-toggle="table" data-url="/json/data.json">
    <thead>
    <tr>
      <th data-field="auszug.betrag">ID</th>
      <th data-field="auszug.unix">Item Name</th>
      <th data-field="auszug.transaktionsart">Item Price</th>
    </tr>
    </thead>
  </table>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<link rel="stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

And the json I'm working with has the following structure:

{
  "auszug": {
    "1604400036082-3450": {
      "betrag": -367.5,
      "von/an_uuid": "Test1",
      "von/an": "Test1",
      "autorisiert-durch": "SYSTEM",
      "unix": 1604400036,
      "transaktionsart": "Lohnzahlung"
    },
    "1604406781759-8437": {
      "betrag": 85.17,
      "von/an": "Test2",
      "autorisiert-durch": "SYSTEM",
      "unix": 1604406782,
      "transaktionsart": "Überweisung"
    },
    "1604395596115-5983": {
      "betrag": 1226.48,
      "von/an": "Test3",
      "autorisiert-durch": "SYSTEM",
      "unix": 1604395596,
      "transaktionsart": "Überweisung"
    }
  },
  "kontonummer": "DEF05487151498683",
  "kontostand": 44641548.66,
  "success": true
}

But when I try to run the code I get "No matching records found". How do I get the data from a json like this into the table?

Many thanks in advance!

Edit: I don't know how to exactly get the responseText in here but here's a screenshot of the console.log:

could you show your javascript, how you load the json file ? — Frenchy
– Frenchy, Commented Nov 5, 2020 at 17:18
I thaught with the bootstrap.table I don't need to write additional javascript? Please correct me if I'm wrong :) I added the script srcs to the snippet. — lojoma
– lojoma, Commented Nov 5, 2020 at 17:21
no you are right, but are you sure the url is okay? the file is touched? — Frenchy
– Frenchy, Commented Nov 5, 2020 at 17:41
i think your structure of json file is not good..i dont see the [ ] — Frenchy
– Frenchy, Commented Nov 5, 2020 at 17:46
I think the URL is ok. Is it possible for me to check it in this setup? I mean normally I would consolo.log()... The other thing is I don't whether the data-fields are correct. (I think I need to get a level deeper, don't I? — lojoma
– lojoma, Commented Nov 5, 2020 at 17:47

Sachin Vishwakarma · Accepted Answer · 2020-11-05 19:03:17Z

2

What can be observed is that you don't know the key because it is dynamic. What you can do is, make an ajax call and get the data in a variable. Now you have to flat the response so you can pass the Flat array to Bootstrap table. Instead of using data-url attribute you follow the process given in fiddle

I have added a fiddle which you can use as an example. I have also added appropriate comment.

HTML

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th data-field="betrag">betrag</th>
      <th data-field="autorisiert-durch">autorisiert-durch</th>
      <th data-field="unix">unix</th>
    </tr>
  </thead>
</table>

your Script should be

<script>
var $table = $('#table')

  $(function() {
  
  // do an ajax call here to get the response. your response should be like responseData
  
  var responseData = {
    "1604400036082-3450": {
        "betrag": -367.5,
        "von/an_uuid": "asdqwe2413",
        "von/an": "Test1",
        "autorisiert-durch": "SYSTEM",
        "unix": 1604400036,
        "transaktionsart": "Überweisung"
        },
    "1604406781759-8437": {
        "betrag": 85.17,
        "von/an": "Test2",
        "autorisiert-durch": "SYSTEM",
        "unix": 1604406782,
        "transaktionsart": "Überweisung"
        },
    };
  
  var data = [];
  
  // Here you have to flat the array
  Object.keys(responseData).forEach(function(key){ 
  
  var value = responseData[key]; 
  data.push(value);
  })
    $table.bootstrapTable({data: data})
  })
  
  </script>

Let me know if you need ajax version of this code.

fiddle http://jsfiddle.net/8ngoh4y1/

edited Nov 5, 2020 at 19:03

answered Nov 5, 2020 at 18:51

Sachin Vishwakarma

8697 silver badges9 bronze badges

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

7 Comments

lojoma Over a year ago

Would be great if I can get an Ajax Version :)

lojoma Over a year ago

Hi, thank you very much! I tried to make an Ajax call which cuts the "auszug" out of the json response but I didn't get it. Do you have any advice on this? Thanks!

Sachin Vishwakarma Over a year ago

Can you post the response you got after making ajax call? While I post the answer with ajax Json call.

lojoma Over a year ago

I edited the json to in my question to be correctly formatted also I attached the screenshot of the console.log. Already thank you so much +1

Sachin Vishwakarma Over a year ago

jsfiddle.net/hwnajc5f check this fiddle, this has json call

|

Collectives™ on Stack Overflow

Populate Bootstrap Table with data from json source

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related