要在ThinkPHP 8的前端视图中渲染这些数据并使用 {volist}
标签进行迭代,我们需要先在后端将包含JSON字符串的字段解析为数组,然后将处理后的数据传递给视图。
以下是具体步骤:
- 解析JSON字符串为数组。
- 将数组传递给视图。
- 在视图中使用
{volist}
标签迭代数组。
后端代码
首先,在控制器中解析JSON字符串并传递数组给视图:
public function yourMethod()
{
// 示例数据
$data = [
[
"id" => 29,
"category_id" => 8,
"partner_id" => 2,
"name" => "香港沙田服务器 E3-1230 系列",
"sku_cpu" => "",
"sku_disk" => '{"adbdd20b1108181a":{"name":"240G SSD","price":"0"},"8be946835e534dbe":{"name":"1TB HDD","price":"0"},"95047284fe778fa2":{"name":"480G SSD","price":"32"}}',
"sku_ram" => '{"2125b9ea756d0cf1":{"name":"8G","price":"0"},"4344a677fd9efa90":{"name":"16G","price":"11"},"78a76c350ad42f61":{"name":"32G","price":"33"}}',
"sku_bandwidth" => '{"3b794a1c178240a9":{"name":"10M 优化","price":"0"},"94f264fcae36b180":{"name":"15M 全向","price":"0"},"08f960dff5a35ed6":{"name":"20M 国际","price":"0"}}',
"sku_ip" => '{"e215784748586b12":{"name":"3","price":"0"},"27ba07df1ce27b4e":{"name":"4","price":"4"},"e1af9ea515feede3":{"name":"5","price":"8"},"d895bce4e623f8c6":{"name":"6","price":"12"}}',
"sku_firewall" => '{"0e4b512eb1eafcf8":{"name":"0","price":"0"}}',
"sku_flow" => '[]',
"sku_gpu" => '[]',
"price_month" => '{"386a95adab8a4fe6":{"period":1,"cycle":"month","price":135,"setup":0,"discount":100},"07f9413c68442501":{"period":3,"cycle":"month","price":405,"setup":0,"discount":100}}',
"price_years" => null,
"is_sale" => 0,
"can_test" => 1,
"sku_raid" => '[]',
"sku_intranet" => '[]',
"sort" => 10,
"status" => 1,
"cpu_info" => null,
"cpu_model" => null
]
];
// 解析JSON字符串为数组
foreach ($data as &$item) {
foreach ($item as $key => $value) {
if (!empty($value) && $this->isJson($value)) {
$item[$key] = json_decode($value, true);
}
}
}
// 将数据传递给视图
$this->assign('data', $data);
return $this->fetch();
}
private function isJson($string) {
json_decode($string);
return (json_last_error() == JSON_ERROR_NONE);
}
前端视图
在前端视图中使用 {volist}
标签进行迭代:
<!-- 渲染数据 -->
{volist name="data" id="item"}
<h2>{$item.name}</h2>
<!-- 渲染 sku_disk 数据 -->
<h3>Disk</h3>
<ul>
{volist name="item.sku_disk" id="disk"}
<li>
<strong>{$disk.name}</strong>: {$disk.price}
</li>
{/volist}
</ul>
<!-- 渲染 sku_ram 数据 -->
<h3>RAM</h3>
<ul>
{volist name="item.sku_ram" id="ram"}
<li>
<strong>{$ram.name}</strong>: {$ram.price}
</li>
{/volist}
</ul>
<!-- 渲染 sku_bandwidth 数据 -->
<h3>Bandwidth</h3>
<ul>
{volist name="item.sku_bandwidth" id="bandwidth"}
<li>
<strong>{$bandwidth.name}</strong>: {$bandwidth.price}
</li>
{/volist}
</ul>
<!-- 渲染 sku_ip 数据 -->
<h3>IP</h3>
<ul>
{volist name="item.sku_ip" id="ip"}
<li>
<strong>{$ip.name}</strong>: {$ip.price}
</li>
{/volist}
</ul>
<!-- 渲染 sku_firewall 数据 -->
<h3>Firewall</h3>
<ul>
{volist name="item.sku_firewall" id="firewall"}
<li>
<strong>{$firewall.name}</strong>: {$firewall.price}
</li>
{/volist}
</ul>
<!-- 渲染 price_month 数据 -->
<h3>Price (Monthly)</h3>
<ul>
{volist name="item.price_month" id="price"}
<li>
<strong>Period: {$price.period} Month(s)</strong>: {$price.price} (Setup: {$price.setup}, Discount: {$price.discount}%)
</li>
{/volist}
</ul>
{/volist}
这样可以确保在调用 json_decode
之前先检查数据是否为空或有效,避免传递 null
给 json_decode
函数,从而避免出现错误。
总结
通过上述步骤,你可以:
- 解析JSON字符串为数组:在控制器中使用
json_decode
函数将JSON字符串解析为数组。 - 传递数组给视图:使用
$this->assign
将解析后的数组传递给视图。 - 在视图中使用
{volist}
标签迭代数组:在视图中使用{volist}
标签来迭代并渲染解析后的数据。
这种方法可以确保你能够在前端视图中使用ThinkPHP自带的 {volist}
标签来迭代并渲染解析后的JSON数据。