从JSON文件创建评级墙

  • 本文关键字:文件创建 JSON php json
  • 更新时间 :
  • 英文 :


我正在尝试创建一个;分级墙";这是一个显示人们对一个地方的评价的表格。评级是从JSON文件(ratings.JSON(访问的,然后显示在墙上。我遇到的问题是,我想要这个人给的星级以黄色星星的形式出现在墙上。我使用的过程是:使用for循环来获得所有评级,(它们只是一个数字(1-5(,所以输出看起来像";152423";。我希望每个人评级的每个数字都以星形显示,所以我想要的结果看起来像这样:期望结果

但目前,明星们正在出现,但由于某种原因,美元评级似乎被定义为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"
}
]

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

最关键的是,第一个循环中的$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>

由此,您可以将printf()中的$obj->rating替换为您希望的任何重复图形标记。

最新更新