How to display coins in json for each Tab in datatable?

Question

Hello I am trying to display json data in each tab and with datatable Can any one tell me how can I do this?

I try looking on google No luck

i like it to be like this https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

but with datatable and its own coin list like btc first tab etc from json file

EDIT the code what stacey gave me it dont show it just shows me a blank page like below image unless its java script? But need it in json?

https://i.stack.imgur.com/jp6w5.jpg

list.json

 [{"coinlist",
"Bitcoin faucets":
"faucet name":"btc Faucet",
 "minutes": "5",
 "amount": "90",
 "claim link": "http://bitcoinsfaucets.com",
         // next faucet off bitcoin goes here!
   },
{
  "eth faucets": 
"faucet name":"eth Faucet",
 "minutes": "15",
 "amount": "1000",
 "claim link": "http://ethwebsite.com",
  // next faucet off eth goes here!
   },
{
  "bitcore faucets":
"faucet name":"bitcore Faucet",
 "minutes": "24",
 "amount": "5000",
 "claim link": "http://bitcorefaucets.com",
         // next faucet off bitcore goes here!
   },
{

"primecoin faucets": 

"faucet name":"prime Faucet",

 "minutes": "55",

 "amount": "3000",

 "claim link": "http://primecoinfaucets.com",

         // next faucet off primecoin goes here!

  ]
 }
]

datatable

<table id=“list” class="table table-bordered table-condensed table-hover" cellspacing="0" width="100%">

  <thead>
                <tr>
                <th>name</th>
                <th>timer</th>
                <th>amount</th>
                <th>cliam link</th>
                </tr>
                </thead>
                <tfoot>      
        </tfoot>



        </table>  
</div>

javascript

  <script type="text/javascript">
   $(document).ready(function() {
   $(‘#list’).DataTable();
      } );            
  </script>

Hi ! It would be better if you checkout [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) of your code for future endeavor at Stack overflow. -Thank you — Momin, Feb 18 '18 at 02:30

Stacey Reiman · Accepted Answer · 2018-02-19T01:33:22.500

I fixed your data but this is just a very basic start, you can use this as an example to build what you are looking for - but you need to read up about Javascript Objects and keys - so you know how to use create valid data objects! You might try reading something like this - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects.

var data = {
 "coinlist": {
  "bitcoin_faucets": {
   "faucet_name": "btc Faucet",
   "minutes": "5",
   "amount": "90",
   "claim_link": "http://bitcoinsfaucets.com"
  },
  "eth_faucets": {
   "faucet_name": "eth Faucet",
   "minutes": "15",
   "amount": "1000",
   "claim_link": "http://ethwebsite.com"
  },
  "bitcore_faucets": {
   "faucet_name": "bitcore Faucet",
   "minutes": "24",
   "amount": "5000",
   "claim_link": "http://bitcorefaucets.com"
  },
  "primecoin_faucets": {
   "faucet_name": "prime Faucet",
   "minutes": "55",
   "amount": "3000",
   "claim_link": "http://primecoinfaucets.com"
  }
 }
}

$('document').ready(function(){
   var links = document.getElementsByTagName('a');
   var i = 0;
   for (coin in data.coinlist) {
     links[i].innerHTML = coin; 
     i++;
   }
  $('li > a').click(function(){
    var table = $('#list')
    var type = $(this).data('type');
    var name = $(this).text().replace(' ','_')
    var the_data = data.coinlist[name];
    
    for (sub in the_data) {
        console.log('sub '+sub)
        var field = the_data[sub]
        $('#'+sub).find('span').text(field)
        if (sub == 'faucet_name' || sub == 'claim_link') {
          var newlink = the_data['claim_link'];
         // console.log(newlink)
          $('#'+sub).find('a').prop('href',newlink)
        }
     }

    console.log('type '+name)
    
    $('#content'+type).append(table)
    $('table').css('display', 'block')
  })   
    $('li > a').first().trigger('click');
})

table {
  display:none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Coin Lists</h2>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" data-type="1" href="#home">Home</a></li>
    <li><a data-toggle="tab" data-type="2" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" data-type="3" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" data-type="4" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3 id="title1"></h3>
      <div id="content1"></div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3 id="title2"></h3>
       <div id="content2"></div>
    <div id="menu3" class="tab-pane fade">
      <h3 id="title3"></h3>
       <div id="content3"></div>
    </div>
    <div id="menu4" class="tab-pane fade">
       <h3 id="title4"></h3>
       <div id="content4"></div>
    </div>
  </div>
</div>

</body>
</html>



<table id=“list” class="table table-bordered table-condensed table-hover" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th id="faucet_name"><a href=""><span></span></a></th>
      <th id="minutes"><span></span></th>
      <th id="amount"><span></span></th>
      <th id="claim_link"><a href=""><span></span></a></th>
    </tr>
    </thead>
    <tfoot>      
  </tfoot>

</table>  
</div>

Hi Stacey Thank You for taking your time to help me this is what i need now it shows in the code snippet the preview but when i copy it to my own it dont show its just blank http://bitocinfaucet.atwebpages.com/ — , Feb 18 '18 at 08:44
You are welcome, I don't think you copied everything - when I view source your JS and your data are missing - make sure to link your script file! — Stacey Reiman, Feb 18 '18 at 21:19
Hi Stacey so can i use this in json as well? as i need it for my crud with json for the admin panel coz ive find this https://stackoverflow.com/questions/38301457/php-crud-json-file-instead-of-a-database-like-mysql . — , Feb 18 '18 at 23:55
yes that should be no problem - just make sure your JSON is valid though! Try posting a JSON file to github or something and you can test here. — Stacey Reiman, Feb 19 '18 at 00:16
okay will how would i use that code in json file? just paste it there? also 1 last thing i need to ask its simple but do you know a place where i can see how to add hyperlink to button in the tabs just with the link only thanks again — , Feb 19 '18 at 00:25
You would need to load the JSON via your ajax. I uploaded your file to a gist - https://gist.githubusercontent.com/mspanish/0fbbaefd91f49a2d00eeb27223b222a8/raw/fe5af7ad37bca186e4a5f36b5c83763c3bad072c/data.json - if I get some time later I can create an ajax fn for you, and add hyperlinks on the buttons. — Stacey Reiman, Feb 19 '18 at 00:39
thanks if you do have time later that be great just need a hyperlink with button on the faucet name and the faucet link thats all thanks again — , Feb 19 '18 at 01:14
thanks Stacey that is what i liked thank you also when you get time can you add the ajex with table and tabs in the above code or tell me a site so . i can read up on it Thanks once again — , Feb 19 '18 at 06:26

How to display coins in json for each Tab in datatable?

1 Answers1