I want to display Json Data into table

Question

var $table = $('#table');
var mydata =
 [
  {
   "id": 0,
   "name": "test0",
   "price": "$0"
  },
  {
   "id": 1,
   "name": "test1",
   "price": "$1"
  },
  {
   "id": 2,
   "name": "test2",
   "price": "$2"
  },
  {
   "id": 3,
   "name": "test3",
   "price": "$3"
  },
  {
   "id": 4,
   "name": "test4",
   "price": "$4"
  },
  {
   "id": 5,
   "name": "test5",
   "price": "$5"
  },
  {
   "id": 6,
   "name": "test6",
   "price": "$6"
  },
  {
   "id": 7,
   "name": "test7",
   "price": "$7"
  },
  {
   "id": 8,
   "name": "test8",
   "price": "$8"
  },
  {
   "id": 9,
   "name": "test9",
   "price": "$9"
  },
  {
   "id": 10,
   "name": "test10",
   "price": "$10"
  },
  {
   "id": 11,
   "name": "test11",
   "price": "$11"
  },
  {
   "id": 12,
   "name": "test12",
   "price": "$12"
  },
  {
   "id": 13,
   "name": "test13",
   "price": "$13"
  },
  {
   "id": 14,
   "name": "test14",
   "price": "$14"
  },
  {
   "id": 15,
   "name": "test15",
   "price": "$15"
  },
  {
   "id": 16,
   "name": "test16",
   "price": "$16"
  },
  {
   "id": 17,
   "name": "test17",
   "price": "$17"
  },
  {
   "id": 18,
   "name": "test18",
   "price": "$18"
  },
  {
   "id": 19,
   "name": "test19",
   "price": "$19"
  },
  {
   "id": 20,
   "name": "test20",
   "price": "$20"
  }
 ];

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>

<div class="container">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

what do you need?anyway please read before the ask your question https://stackoverflow.com/help/how-to-ask — core114, Oct 11 '17 at 06:59

score 0 · Accepted Answer · edited Oct 11 '17 at 13:59

I would highly suggest you to use jQuery dataTable.

A simple Plugin to convert Any Array or JSON data into HTML tables

just call you datatable init like this

$(function () {
  $('#table').DataTable({ 
    ajax: {
      url: "../call/Mydata.php",  // will return the JSON as response
      type: 'GET'
    },
    columns: [
      { data: "users.id" },
      { data: "users.name" },
      { data: "users.price" }, 
    ]
  })
};

score 0 · Answer 2 · answered Oct 11 '17 at 07:08

0

What's your problem ? Your code is working perfectly. Here is a fiddle link :
HTML :

<div class="container">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

Working Fiddle

answered Oct 11 '17 at 07:08

Minar Mnr

1,376
1
16
23

it showing only Table Head , but it working on Fiddle. – Balaji Dongare Oct 11 '17 at 07:34

Asif Jafri Mohammad Fahim · Answer 3 · 2017-10-11T07:40:41.857

Without any plugins you can do it in this way

$.each(mydata,function(id,val){
   var tableData = "<tr>";
   $.each(val,function(column,value){

     tableData = tableData + "<td>"+ value +"</td>";

   });
   tableData = tableData+ "</tr>";
   $('#tableBody').append(tableData);
});

And change your HTML table and add table body.

<table id="table">
<thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
</thead>
<tbody id="tableBody">
<tbody>

I want to display Json Data into table

3 Answers3