时间戳

首页 > 解决方案 > 从 JSON 文件创建评分墙

php - 从 JSON 文件创建评分墙

问题描述

我正在尝试创建一个“评分墙”，这是一张显示人们对某个地方的评分的表格。评级从 JSON 文件 (ratings.json) 访问，然后显示在墙上。我遇到的问题是我希望该人给出的星级以黄色星星的形式出现在墙上。我为此使用的过程是：使用 for 循环获取所有评级，（它们只是一个数字（1-5），所以输出看起来像“152423”。我想要每个人的每个数字评级以星形显示，所以我想要的结果看起来像这样：想要的结果

但此刻，星星正在出现，但 $rating 似乎出于某种原因被定义为 5。我觉得这与被解码的 JSON 和 $decode[$i]['rating'] 是数组形式有关。

任何帮助，将不胜感激。

下面的代码：

    <html>
  <head>
  <link rel="stylesheet" href="comments.css" />
  <title>Lonely Bris</title>
  </head>
  <body>
    <table class="table">
    <?php
      $output = file_get_contents("ratings.json");
      $decode = json_decode($output, true);
      
      for($i = 0; $i < count($decode); $i++) {
        $decode[$i]['rating'];
        $rating = $decode[$i]['rating'];     
      }

      $star = '<div class="rate"><input type="radio" id="star" name="rate"/><label for="star" title="text">1 star</label></div>';

      if($rating == 1){
       $rating = str_repeat($star, 1);
      }
      elseif($rating == 2){
        $rating = str_repeat($star, 2);
      }
      elseif($rating == 3){
       $rating = str_repeat($star, 3);
      }
      elseif($rating == 4){
       $rating = str_repeat($star, 4);
      }
      elseif($rating == 5){
        $rating = str_repeat($star, 5);
      }
      else{
        $rating = "Unknown.";
      }
      echo "<tr><th></th><th>Review</th><th>Rating</th><th>Image?</th></tr>";
      
      for($i = 0; $i < count($decode); $i++) {

      $imgUrl = $decode[$i]['image'];

      echo "<tr class=border_bottom><td>" . "<div class=name>" . $decode[$i]['name'] . "</div>" . " - " . $rating . "<br><br>" . $decode[$i]['review'] . "</td>";
    ?>
    <td><img src="<?php echo $imgUrl; ?>" height="70" width="120" class="img-thumbnail" /></td></tr>
    <?php   
      }
    ?>
  </table>
  </body>
</html>

JSON 文件 (ratings.json)

[
    {
        "name": "James",
        "event": "Test",
        "review": "Test",
        "rating": "5",
        "image": "http:\/\/localhost\/ClassIA3\/images\/RobloxScreenShot20210104_132131740.png"
    },
    {
        "name": "Sup",
        "event": "The Storytellers",
        "review": "Test",
        "rating": "5",
        "image": "http:\/\/localhost\/ClassIA3\/images\/RobloxScreenShot20201012_195012147.png"
    },
    {
        "name": "Pont",
        "event": "ACTivate children's club for 3-4 years",
        "review": "Test",
        "rating": "4",
        "image": "http:\/\/localhost\/ClassIA3\/images\/RobloxScreenShot20210101_181318133.png"
    },
    {
        "name": "Hello2",
        "event": "Flexibility and core training",
        "review": "Was so good for my core",
        "rating": "5",
        "image": "http:\/\/localhost\/ClassIA3\/images\/RobloxScreenShot20201120_213311711.png"
    },
    {
        "name": "Hello2",
        "event": "The Letter 'B'",
        "review": "SO Cool",
        "rating": "1",
        "image": "http:\/\/localhost\/ClassIA3\/images\/untitled.png"
    },
    {
        "name": "Sup",
        "event": "Dragon boating",
        "review": "Origami!",
        "rating": "4",
        "image": "http:\/\/localhost\/ClassIA3\/images\/Capture.PNG"
    },
    {
        "name": "Hello2",
        "event": "Brisbane Greeters - Paddington walking tour",
        "review": "I loved it!",
        "rating": "5",
        "image": "http:\/\/localhost\/ClassIA3\/images\/OLD TECH ROOMS.jpg"
    }
]

标签： phpjson

解决方案

有几件事需要修复/改进。

最关键的是，在您的第一个循环中，一遍又一遍地$rating = $decode[$i]['rating'];覆盖相同的变量。$rating当循环结束时，$rating将是最终迭代中访问的值——这就是为什么您总是在样本数据中看到五颗星。

此外，$decode[$i]['rating'];在第一个循环中什么也不做；只需删除该行代码。

为了使您动态生成的 html 更易于阅读，我建议使用带有占位符的基本模板字符串 - 这样您就需要使用插值或连接将静态文本与变量混合。

我不知道您对无线电输入的意图是什么，但id属性在有效的 html 文档中必须是唯一的。同一形态的不同星集之间的name属性也会发生冲突——再说一次，我不知道你的意图。

使用 css 来实现样式。使用类来设置重复元素的样式。

仅使用 html 表格来呈现表格数据。不建议/现代滥用表格作为“网格”一般 html 布局的一种方式。

推荐的起始代码：（演示）

$rowTemplate = <<<ROWTEMPLATE
    <tr class="border_bottom">
        <td class="event">%s</td>
        <td class="name">%s</td>
        <td class="review">%s</td>
        <td class="rating">%s</td>
        <td><img class="img-thumbnail" src="%s"/></td>
    </tr>

ROWTEMPLATE;

?>
<table class="table">
    <tr>
        <th>Event</th>
        <th>Reviewer</th>
        <th>Review</th>
        <th>Rating</th>
        <th>Image?</th>
    </tr>
<?php
    foreach (json_decode($json) as $obj) {
        printf(
            $rowTemplate,
            $obj->event,
            $obj->name,
            $obj->review,
            $obj->rating,
            $obj->image,
        );    
    }
?>
</table>

从此，您可以用您希望的任何重复图形标记替换$obj->ratingin 。printf()

推荐阅读