【问题标题】:JSON binding to multiple tables on one pageJSON 绑定到一页上的多个表
【发布时间】:2018-09-05 16:01:59
【问题描述】:

我有一个网页会显示模块的文档,每个模块都记录在一个单独的表格中,如下所示

<div role="main">
<div class="section">
<h2 id="acces_extranet">Acces_Extranet</h2>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td />
<td />
</tr>
</tbody>
</table>
<h3 id="connexion_extranet">Connexion_Extranet</h3>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td />
<td />
</tr>
</tbody>
</table>
<h4 id="m00_0_lancer_navigateur">M00_0_Lancer_Navigateur</h4>
<table>
<thead>
<tr>
<th>Variables</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>navigateur</td>
<td>Insérer description</td>
</tr>
<tr>
<td>url</td>
<td>Insérer description</td>
</tr>
</tbody>
</table>
</div>
</div>

另一方面,我有一个转换为 JSON 文件的 CSV 文件,我想从该文件中读取数据以将它们永久显示在我的 HTML 页面中。

[
  {
 "Module": "M00_0_Lancer_Navigateur",
 "Variable": "navigateur",
 "Description": "Le navigateur à utiliser pour le test, non sensible à la case",
 "Valeurs": "",
 "": ""
  },
  {
 "Module": "M00_0_Lancer_Navigateur",
 "Variable": "url",
 "Description": "l'url initiale du site à lancer, il peut s'agir d'une url ARIANE ou magie de tout environnement",
 "Valeurs": "",
 "": ""
  },
  {
 "Module": "M00_2_Extranet_Connexion",
 "Variable": "login",
 "Description": "Insérer description",
 "Valeurs": "",
 "": ""
  }
]

我想在 JSON 文件中的表格中显示数据?

【问题讨论】:

    标签: html json data-binding


    【解决方案1】:

    你在使用 PHP 吗?您可以使用 PHP 到 json_decode(json_text) 为您提供键和值的数组。您可以合并一个 for 循环来打印一行

    例如……

    <?php 
    
    $raw_json = file_get_contents($path_to_json);
    $json_data = json_decode($raw_json); // $json_data is now an array of the json data 
    
    ?>
    
    
    <?php foreach($json_data as $row){ ?>
        <tr> <?php echo $row['key'] ?></tr>
    <?php } ?>
    

    【讨论】:

    • 感谢您的回答。我想使用 jquery 或 angularjs,因为我的文件是从 markdown 文件生成的。
    猜你喜欢
    • 2021-11-03
    • 1970-01-01
    • 2023-03-27
    • 2016-09-19
    • 1970-01-01
    • 2012-12-12
    • 1970-01-01
    • 2016-08-30
    • 1970-01-01
    相关资源
    最近更新 更多