2017-03-23 43 views
-1

编辑以一个JSON响应,并把它转换成HTML表格

利用一种称为Postman程序我都用得到下面的代码的第一部分,$卷曲位:

<?php 

$curl = curl_init(); 

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.extensopro.com/machines/list? customerid=????&apikey=??????????????????????????????????????", 
CURLOPT_RETURNTRANSFER => true, 
CURLOPT_ENCODING => "", 
CURLOPT_MAXREDIRS => 10, 
CURLOPT_TIMEOUT => 30, 
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, 
CURLOPT_CUSTOMREQUEST => "GET", 
CURLOPT_HTTPHEADER => array(
"authorization: AWS4-HMAC-SHA256 Credential=/20170322/us-east-1/execute-api/aws4_request, SignedHeaders=content-type;host;x-amz-date, Signature=38e3277546829fd58be65805df8832c51b6a865c9df7279e80c408bd3116587d", 
"cache-control: no-cache", 
"content-type: application/x-www-form-urlencoded", 
"postman-token: 4aafd978-bda3-88ef-0db2-326b91880549", 
"x-amz-date: 20170322T095504Z" 
), 
)); 

$response = curl_exec($curl); 
$err = curl_error($curl); 

curl_close($curl); 
?> 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 
<body> 
    <table border="1" cellpadding="8" cellspacing="0" id="cteTable"> 
    <tr> 
     <th>ID</th> 
     <th>MANUFACTURER</th> 
     <th>YEAR</th> 
    </tr> 
</table> 
<script type="text/javascript"> 

$(document).ready(function() { 
$.getJSON(url, 
function (json) { 
    var tr; 
    for (var i = 0; i < json.length; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td>" + json[i].ID + "</td>"); 
     tr.append("<td>" + json[i].MANUFACTURER + "</td>"); 
     tr.append("<td>" + json[i].YEAR + "</td>"); 
     $('table').append(tr); 
    } 
    }); 
}); 
$('#cteTable').append(tr) 
</script> 
</body> 
</body> 
</html> 

我知道这是不正确的,但我没有任何编码知识,上面的代码是部分从这post也从这

邮递员的反应显示大约40个标题,我必须让每个人都在上面的代码为th是工作还是我想要的?

下面是输出:

if ($err) { 
echo "cURL Error #:" . $err; 
} else { 
echo $response; 
} 


{"DATA":[{"UNITS":8,"CONDITION":{"NAME":"","VALUE":""},"UNITTYPE":"Stations","IMPRESSIONS":205000000,"MANUFACTURER":"Heidelberg","MODEL":"SM 102","HASREFERENCE":true,"HASSIZE":1,"YEAR":1994,"REFERENCE":"8187","URL":"/Machines/Heidelberg/44715-50082/Heidelberg-SM-102-8.html","SIZE":{"HEIGHT":1020,"HASWIDTH":1,"WIDTH":720,"NAME":"720x","HASHEIGHT":1},"HASIMAGE":1,"STATUSES":[{"NAME":"In Production","ID":8}],"CATEGORY":"Press","IMAGE":{"ONERROR":"failover(this, { imagegeneratorid: '219610_60', onerror1 : 'https://s3-eu-west-1.amazonaws.com/presscity-thumbnails/18/60/x60_heidelberg-sm102-219610.jpg', onerror2: 'http://pdf.presscity.com/localStorage_s3.cfm?orgFile=18_6535fb358939919cb4a37ac9f013b895.jpg&filename=x60_Heidelberg-SM102-219610.jpg&size=60&host=api.extensopro.com&nPictureNo=219610&nMachineNo=44715'});","ID":219610,"SRC":"http://cdn.presscity.com/18/60/x60_heidelberg-sm102-219610.jpg"},"SPECIFICATIONWEBSITE":"","SUBCATEGORY":"Sheetfed","NAME":"Heidelberg SM 102 8","ID":44715,"AVAILABLILITY":"","HASYEAR":1,"HASPRICE":0,"SPECIFICATION":"Straight Machine No Perfecting\r\nStream Feeder, CPC 1-03, CP Tronic, Autoplate, Alcolor damping, Auto Ink roller wash, \r\nAuto Blanket Wash, Non-stop feeder & delivery, Preset Feeder, Diagonal Register, Powder Spray, \r\n"}],"INFO":{"RECORDCOUNT":1}} 

所以我知道从服务器的输出工作,我现在该如何去解析这个输出,并将其放置到表我的网页上,并为上述问,我是否必须使用所有输出的字段或只是我想要的字段?

+0

请分享resonse。 –

+0

请发布您期待的回复和回复。如果您发现任何错误,请分享。 –

+0

已添加从数据服务器获得的$响应。我如何解析并进入表格? –

回答

0

HTML页面和您用来从页面主体填充表格的Javascript需要成为同一HTML页面的一部分。如果是这种情况,从你发布的内容中不清楚。尝试用您的PHP文件中的代码替换您的<script>...</script> 代码。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
</head> 
    <body> 
     <table id="cteTable"> 
     <tr> 
      <th>Account Name</th> 
      <th>Advisor</th> 
      <th>Links</th> 
     </tr> 
    </table> 
<script type="text/javascript"> 

    $(document).ready(function() { 
$.getJSON(url, 
    function (json) { 
     var tr; 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[i].User_Name + "</td>"); 
      tr.append("<td>" + json[i].score + "</td>"); 
      tr.append("<td>" + json[i].team + "</td>"); 
      $('table').append(tr); 
     } 
     }); 
    }); 
    $('#cteTable').append(tr) 
</script> 
</body> 
</html>