Need help with json

Need help with json

hi all i am newbie to json  someone gave me a script

 but i need it to be fetched from json file it self not use the java script  need the file

trying to make a non faucet list but its not happing as i feel like to give up 

if any one can help me it be great

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

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

  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  13. <style>
  14. table {
  15. display:none;
  16. }

  18. </style>
  19. </head>
  20. <body>

  22. <div class="container">
  23. <h2>Coin Lists</h2>

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

  32. <div class="tab-content">
  33. <div id="menu1" class="tab-pane fade in active">
  34. <h3 id="title1"></h3>
  35. <div id="content1"></div>
  36. </div>
  37. <div id="menu2" class="tab-pane fade">
  38. <h3 id="title2"></h3>
  39. <div id="content2"></div>
  40. <div id="menu3" class="tab-pane fade">
  41. <h3 id="title3"></h3>
  42. <div id="content3"></div>
  43. </div>
  44. <div id="menu4" class="tab-pane fade">
  45. <h3 id="title4"></h3>
  46. <div id="content4"></div>
  47. </div>
  48. </div>
  49. </div>

  51. <script>
  53. var data = {
  54. "coinlist": {
  55. "bitcoin_faucets": {
  56. "faucet_name": "btc Faucet",
  57. "minutes": "5",
  58. "amount": "90",
  59. "claim_link": "http://bitcoinsfaucets.com"
  60. },
  61. "eth_faucets": {
  62. "faucet_name": "eth Faucet",
  63. "minutes": "15",
  64. "amount": "1000",
  65. "claim_link": "http://ethwebsite.com"
  66. },
  67. "bitcore_faucets": {
  68. "faucet_name": "bitcore Faucet",
  69. "minutes": "24",
  70. "amount": "5000",
  71. "claim_link": "http://bitcorefaucets.com"
  72. },
  73. "primecoin_faucets": {
  74. "faucet_name": "prime Faucet",
  75. "minutes": "55",
  76. "amount": "3000",
  77. "claim_link": "http://primecoinfaucets.com"
  78. }
  79. }
  80. }

  82. $('document').ready(function(){
  83. var links = document.getElementsByTagName('a');
  84. var i = 0;
  85. for (coin in data.coinlist) {
  86. links[i].innerHTML = coin;
  87. i++;
  88. }
  89. $('li > a').click(function(){
  90. var table = $('#list')
  91. var type = $(this).data('type');
  92. var name = $(this).text().replace(' ','_')
  93. var the_data = data.coinlist[name];
  95. for (sub in the_data) {
  96. console.log('sub '+sub)
  97. var field = the_data[sub]
  98. $('#'+sub).find('span').text(field)
  99. if (sub == 'faucet_name' || sub == 'claim_link') {
  100. var newlink = the_data['claim_link'];
  101. // console.log(newlink)
  102. $('#'+sub).find('a').prop('href',newlink)
  103. }
  104. }

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

  115. </script>



  119. </body>
  120. </html>



  124. <table id=“list” class="table table-bordered table-condensed table-hover" cellspacing="0" width="100%">
  125. <thead>
  126. <tr>
  127. <th id="faucet_name"><a href=""><span></span></a></th>
  128. <th id="minutes"><span></span></th>
  129. <th id="amount"><span></span></th>
  130. <th id="claim_link"><a href=""><span></span></a></th>
  131. </tr>
  132. </thead>
  133. <tfoot>
  134. </tfoot>

  136. </table>
  137. </div>