将脚本变量（json数据）转换为html表

时间：2017-12-02 10:56:23

标签： javascript php json

我只是使用Api密钥从外部网站获得响应。该值在php变量中，我将该php变量转换为脚本变量

    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
   <div class="input-group">
    <input type="text" class="form-control" id="form-control" name="form-
  control" size="50" placeholder="" required>
  <div class="input-group-btn">
    <button type="button" class="btn btn-danger">Subscribe</button>
   </div>
 </div>
 </form>
 </div>
 <div id="output"> </div>
 <div class="php">
<?php
$se = $_POST['form-control'];
$curl = curl_init();

 curl_setopt_array($curl, array(
CURLOPT_URL => "http://www.healthos.co/api/v1/search/medicines/brands/+$se",
 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: Bearer xxxxxxx",
"cache-control: no-cache"

 ),
));

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

  curl_close($curl);

 if ($err) {
  echo "cURL Error #:" . $err;
  } else {
  ?>
  <script type="text/javascript">

   var arr;
   arr=<?php echo json_encode($response);?>;
   var table = "<table border='1'>";
   table += "<tr><th>Name</th><th>Form</th></tr>";
   for(i in arr){
   table += "<tr>";
   table += "<td>"+arr[i].name+"</td>";
   table += "<td>"+arr[i].form+"</td>";
   table += "</tr>";
    }
   table += "</table>";
   document.querySelector("#output").innerHTML = table;
   </script>

现在我打印出obj变量，它显示了一些输出，如

  [{"name":"ANACIN PAIN CREAM","form":"Cream","standardUnits":1,"packageForm":"Tube","price":16.25,"size":"10 gm Cream","manufacturer":"Pfizer Ltd","constituents":[{"name":null,"strength":""}],"schedule":{"category":"OTC","label":"It can be sold without a prescription"},"medicine_id":"46GV33","id":"569a432a06fb5b4ab8860526","search_score":7.60779},{"name":"ANACIN 400MG/30MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":17.25,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"IIQ1w4","id":"586aad9691c126fe05687007","search_score":6.8334208},{"name":"ANACIN 400MG/30MG TABLET","form":"tablet","standardUnits":160,"packageForm":"bottle","price":447.32,"size":"160 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wVG4G","id":"586ab1a191c126fe056c66d1","search_score":6.8334208},{"name":"ANACIN 400MG/40MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":17.25,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"40 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wVz3G","id":"586ab1a791c126fe056c6c95","search_score":6.8334208},{"name":"ANACIN 400MG/30MG TABLET","form":"Tablet","standardUnits":6,"packageForm":"Strip","price":15.7,"size":"6 Tablet","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"OTC","label":"It can be sold without a prescription"},"medicine_id":"6wV4z6","id":"569a42c406fb5b4ab885587d","search_score":6.8334208},{"name":"ANACIN MULTIPAIN 400 MG/40 MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":19.87,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"40 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wV3zG","id":"586ab1a991c126fe056c6e7b","search_score":5.125066}]

我怎么能把这个输出作为一个html表消失，我已经尝试了但它输出错误

 document.write(obj[5]);

它从输出中显示m

我需要简单地显示anacin pain creme和他们的标准单位为1

是否有人可以帮忙 提前致谢

3 个答案:

答案 0 :(得分：1)

喜欢这个吗？

var data = [{"name":"ANACIN PAIN CREAM","form":"Cream","standardUnits":1,"packageForm":"Tube","price":16.25,"size":"10 gm Cream","manufacturer":"Pfizer Ltd","constituents":[{"name":null,"strength":""}],"schedule":{"category":"OTC","label":"It can be sold without a prescription"},"medicine_id":"46GV33","id":"569a432a06fb5b4ab8860526","search_score":7.60779},{"name":"ANACIN 400MG/30MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":17.25,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"IIQ1w4","id":"586aad9691c126fe05687007","search_score":6.8334208},{"name":"ANACIN 400MG/30MG TABLET","form":"tablet","standardUnits":160,"packageForm":"bottle","price":447.32,"size":"160 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wVG4G","id":"586ab1a191c126fe056c66d1","search_score":6.8334208},{"name":"ANACIN 400MG/40MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":17.25,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"40 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wVz3G","id":"586ab1a791c126fe056c6c95","search_score":6.8334208},{"name":"ANACIN 400MG/30MG TABLET","form":"Tablet","standardUnits":6,"packageForm":"Strip","price":15.7,"size":"6 Tablet","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"OTC","label":"It can be sold without a prescription"},"medicine_id":"6wV4z6","id":"569a42c406fb5b4ab885587d","search_score":6.8334208},{"name":"ANACIN MULTIPAIN 400 MG/40 MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":19.87,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"40 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wV3zG","id":"586ab1a991c126fe056c6e7b","search_score":5.125066}];

var div = document.querySelector('div');

makeTable();

function makeTable(){
    if(!data){
        return;
    }
    
    var ix, ixLen;
    var table = '';
    table += '<table>';
    table += '<thead>';
    table += '<tr><th>Name</th><th>Form</th><th>StandardUnits</th><th>...</th></tr>'
    
    for(ix = 0, ixLen = data.length; ix < ixLen; ix++){
        table += '<tr>';
        table += '<td>' + data[ix].name + '</td>';
        table += '<td>' + data[ix].form + '</td>';
        table += '<td>' + data[ix].standardUnits + '</td>';
        table += '<td>...</td>';
    }
    
    div.innerHTML = table;
}
table, td, tr, th {
  border: 1px solid;
  padding: 10px;
  border-collapse: collapse;
}
<div>

</div>

答案 1 :(得分：0)

您可以使用任何循环

var arr = [{"name":"ANACIN PAIN CREAM","form":"Cream","standardUnits":1,"packageForm":"Tube","price":16.25,"size":"10 gm Cream","manufacturer":"Pfizer Ltd","constituents":[{"name":null,"strength":""}],"schedule":{"category":"OTC","label":"It can be sold without a prescription"},"medicine_id":"46GV33","id":"569a432a06fb5b4ab8860526","search_score":7.60779},{"name":"ANACIN 400MG/30MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":17.25,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"IIQ1w4","id":"586aad9691c126fe05687007","search_score":6.8334208},{"name":"ANACIN 400MG/30MG TABLET","form":"tablet","standardUnits":160,"packageForm":"bottle","price":447.32,"size":"160 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wVG4G","id":"586ab1a191c126fe056c66d1","search_score":6.8334208},{"name":"ANACIN 400MG/40MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":17.25,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"40 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wVz3G","id":"586ab1a791c126fe056c6c95","search_score":6.8334208},{"name":"ANACIN 400MG/30MG TABLET","form":"Tablet","standardUnits":6,"packageForm":"Strip","price":15.7,"size":"6 Tablet","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin","strength":"400 mg"},{"name":"Caffeine","strength":"30 mg"}],"schedule":{"category":"OTC","label":"It can be sold without a prescription"},"medicine_id":"6wV4z6","id":"569a42c406fb5b4ab885587d","search_score":6.8334208},{"name":"ANACIN MULTIPAIN 400 MG/40 MG TABLET","form":"tablet","standardUnits":10,"packageForm":"strip","price":19.87,"size":"10 tablets","manufacturer":"Pfizer Ltd","constituents":[{"name":"Aspirin(ASA)","strength":"400 mg"},{"name":"Caffeine","strength":"40 mg"}],"schedule":{"category":"H","label":"It needs a valid prescription to be sold"},"medicine_id":"6wV3zG","id":"586ab1a991c126fe056c6e7b","search_score":5.125066}];

var table = "<table border='1'>";
table += "<tr><th>Name</th><th>Form</th></tr>";
for(i in arr){
  table += "<tr>";
  table += "<td>"+arr[i].name+"</td>";
  table += "<td>"+arr[i].form+"</td>";
  table += "</tr>";
}
table += "</table>";
document.querySelector("#output").innerHTML = table;
<div id="output">
</div>

<强>更新

还解析json 

var arr="<?php echo json_encode($response);?>";
arr = JSONpars(arr);

答案 2 :(得分：0)

<body>
<img src="logo.png">
<div id='search-box'>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" 
target='_top'>
<input id='search-text' name='search-text' placeholder='e.g Crocine' 
type='text'/>
<button id='search-button' type='submit'><span><b>Search</b></span></button>
<br><br><br><br><br><br><br>
</form>
</div>
<?php
$se = $_POST['search-text'];
$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "http://www.xxx/api/$se",
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: Bearer 
 xxxxxxxzyyyyyyzzzzzz",
"cache-control: no-cache",

 ),
 ));

$response = curl_exec($curl);
$err = curl_error($curl);
$result = json_decode($response, true); ?>
<table id="customers" >
<thead>
<tr>
<th>lab_test_data</th>
<th>lab_test_id</th>
<th>lab_test_name</th>
<th>id</th>
<th>search_score</th>

</tr>
</thead>
<tbody class="tbody">
<?php
 $i=0;
while($result[$i]['lab_test_data']!=null)
{?> 
<tr>
<td><?php echo $result[$i]['lab_test_data'];?> </td>    
<td><?php echo $result[$i]['lab_test_id'];?></td>
<td><?php echo $result[$i]['lab_test_name'];?></td>
<td><?php echo $result[$i]['id'];?></td>
<td><?php echo $result[$i]['search_score'];?></td>
</tr>

 <?php
 $i++;
 }
 ?>
 </tbody>
 </table>
 <?php
 curl_close($curl);

 if ($err) {
 echo "cURL Error #:" . $err;
 } else {
 }
 ?>
 </body>

感谢大家 我得到了答案，我希望这对某人有用： - ）

相关问题
最新问题