JSONデータをhtmlテーブルに表示する方法

ここでは、AJAX呼び出しを使用してAPIからJSONデータを取得しています。そして私はhtml形式でデータを表示する必要があります。誰かに私にそれをする方法を教えてもらえますか？ JSONデータは次のようになります。JSONデータをhtmlテーブルに表示する方法

"vjginteractive":{"signup_date_time":"2017-04-11 01:34:19","package_id":"2","total_leads":0},"vmlsingapore":{"signup_date_time":"2016-05-31 07:33:38","package_id":"2","total_leads":"not_available"},"vodkafashionindia":{"signup_date_time":"2016-03-17 18:15:48","package_id":"2","total_leads":0}

これは私が試したことです。会社名、訪問数、リード数をテーブル形式で表示する方法は？

$(document).ready(function() 
 
    { 
 
var X = []; 
 
var Y = []; 
 
var data = []; 
 
function loadJSON(callback) { 
 
    var xobj = new XMLHttpRequest(); 
 
    xobj.overrideMimeType("application/json"); 
 
    xobj.open('GET', 'https://api.myjson.com/bins/nihnp', true); 
 
    xobj.onreadystatechange = function() { 
 
     if (xobj.readyState == 4 && xobj.status == "200") { 
 
      callback(xobj.responseText); 
 
     } 
 
    } 
 
    xobj.send(null); 
 
} 
 
loadJSON(function(response) { 
 
    var response; 
 
    var field=JSON.parse(response); 
 
    var values=[]; 
 
    for (var i = 0; i < field.length; i++) { 
 
     var $this=field[i]; 
 
     for (var key in $this) { 
 
      if ($this.hasOwnProperty(key)) { 
 
      var val = $this[key]; 
 
      values.push({"x":val.total_visits,"y":val.total_leads}); 
 
      } 
 
     } 
 
    } 
 
}); 
 
});

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="chartContainer" style="height: 560px; width: 100%;"></div> 
 
</head>

出典

2017-10-23 Raghavi

あなたはjQueryのデータテーブルのようなものを使用することができます....ます。https：//datatables.net/ –

私は、最新のjQuery 3.2.1（1.11.1がサポートされていない使用することをお勧めしますもう） –

あなたはすべてのキーとあなたのArrayを返しますObject.keysとObject年代のキーを取得することができます。次に、forEachを使用してそれらを反復処理することができます。

$(document).ready(function() { 
 
    function loadJSON(callback) { 
 
    const data = '{"vjginteractive":{"signup_date_time":"2017-04-11 01:34:19","package_id":"2","total_leads":0},"vmlsingapore":{"signup_date_time":"2016-05-31 07:33:38","package_id":"2","total_leads":"not_available"},"vodkafashionindia":{"signup_date_time":"2016-03-17 18:15:48","package_id":"2","total_leads":0}}'; 
 
    callback(JSON.parse(data)); 
 
    } 
 

 
    loadJSON(function(response) { 
 
    const $table = $('#chartContainer'); 
 
    Object.keys(response) 
 
     .forEach((key) => { 
 
     const field = response[key]; 
 
     $table.append(
 
      `<tr> 
 
      <td>${field.signup_date_time}</td> 
 
      <td>${field.package_id}</td> 
 
      <td>${field.total_leads}</td> 
 
      </tr>`); 
 
     }); 
 
    }); 
 
});

td { 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    padding: 5px 10px; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <table id="chartContainer"></table> 
 
</head>

出典

2017-10-23 05:48:01 felixmosh

JSONデータをhtmlテーブルに表示する方法

答えて

関連する問題