我想问一下,如何获取我创建的json数组数据,并根据点击讲师照片时选择的id来显示。
我有一个教员页面,里面有教员数据列表,还有一个教员详情页,就是在教员页面点击教员的详细描述。
我已经有了json数据,但是我不能按照id调用数据,看起来数据都是列出来的。如何根据索引显示数据?
错误的样子如下图。
这是我 指导老师.php 编码
<main>
<section id="instructors">
<div class="container">
<div class="row">
<div class="col col-3">
<a href="instructor-detail.php?id=1" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/shiqeen.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Shiqeen</div>
<div class="initial">S</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="instructor-detail.php?id=2" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/mandy.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Mandy</div>
<div class="initial">M</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="instructor-detail.php?id=3" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/hannah.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Hannah</div>
<div class="initial">H</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="packleader.php" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/bebe.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Bebe</div>
<div class="initial">B</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="instructor-detail.php?id=4" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/charisse.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Charisse</div>
<div class="initial">C</div>
</div>
</a>
</div>
<div class="col col-3">
<a href="instructor-detail.php?id=5" class="card-leader">
<div class="image">
<img src="<?= $base_url ?>assets/img/packleaders/sherie.jpg" class="img-fluid">
</div>
<div class="content">
<div class="name">Sherie</div>
<div class="initial">S</div>
</div>
</a>
</div>
</div>
</div>
</section>
</main>
这是我 教员详情.php 编码
<main>
<?php
$id = $_GET['id'];
$data = file_get_contents("http://cru68.test/assets/js/data-instructor.json");
$data = json_decode($data, TRUE);
?>
<section id="packleader">
<div class="container-fluid custom-container">
<div class="row">
<?php foreach ($data as $d) { ?>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 video">
<div class="main-video d-flex-justify-content-center">
<div class="content-video">
<img src="assets/img/packleaders/packleaders-video-sample.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 ">
<div class="biography">
<legend class="title"><?= $d['name']; ?></legend>
<div class="text">
<?= $d['description']; ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
</main>
这是我的json文件 data-instructor.json 比如说
[{
"id": "1",
"name": "Shiqeen",
"description": "<p>Shiqeen wasn’t always a sporty spice. She picked up sports at the age of 17, playing touch rugby for 6 years. After graduating with a diploma in Sports and Exercise Science, she went on to to become a flight attendant. While flying, Shiqeen would visit gyms and studios, trying out fitness programs all around the world which inspired her to take a personal training course.</p> <p>Shiqeen loves high intensity workouts as they challenge the mind and body. Naturally, she got hooked on spinning and boxing, leading her to become a pack leader at CRU. When in class, expect her to be your personal hypegirl, cheering and pushing you past your limits. Dance (twerk) it out on the bag with ‘Shakween’ to hip hop and R&B tunes. We promise you a great sweaty time! </p>",
"image": "shiqeen.jpg"
},
{
"id": "2",
"name": "Mandy",
"description": "<p>Music and Endorphins — that’s what got Mandy hooked on CRU (cycle and box) and motivated her to become a pack leader at both studios - expect block rockin’ beats in her classes that will push you further than you thought you could go.</p> <p>Outside the studio - Mandy is an avid hiker and has explored peaks in Europe, Asia, and North America. The air is better up there and there is a sense of peace you get from being able to disconnect from everything.</p> <p>And if that doesn't do it for you, go for her class so you can hang out with resident CruCycle pupper, Udon.</p>",
"image": "mandy.jpg"
},
{
"id": "3",
"name": "Hannah",
"description": "<p>Hannah's Indoor Cycling journey – from struggling to catch the beat on bike 35, to rallying her riders from the instructor bike – happened right here at CruCycle. Known for her love of old to new school hip hop, Hannah's class is full of speed and swag. Get ready to add that bounce, and throw some groove into your ride.</p> <p> When she isn't teaching, hannah spends her downtime moseying around museums, eating Acai at Juice Junkie, or chillin' at home with her cats.</p> ",
"image": "hannah.jpg"
},
{
"id": "4",
"name": "Charisse",
"description": "<p>Charisse found her way to CruCycle when she was trying to get back in shape after her first child. She loved it so much, the mom of two never left.</p> <p>Hailing from Hong Kong, she has found indoor cycling to be one of the constants in her life, no matter where she is. She truly believes in pursuing what she loves, and wastes no time waiting.</p> <p>When she's not in the studio, she's usually on the plane, searching for a new adventure with her kiddos. If you're looking for some infectious laughs and catchy tunes, come ride with our resident mama.</p>",
"image": "charisse.jpg"
},
{
"id": "5",
"name": "Sherie",
"description": "<p>Sherie lives by the motto: sweat once a day. From yoga to spinning, the sweat life has been part of her journey, and she’s always game to try new workouts.</p> <p> To Sherie, Indoor spinning is more than just a workout – this sweat drippin’, heart racin’, endorphin pumpin’ activity is the most responsible dance party alive. Sherie believes that being on the bike is her way of being 100% present in the moment as she keeps her focus on the beats, the reps, and the energy in the room.</p> <p>Expect slick moves, fast tracks, and a sweat you won’t regret when you show up for Sherie’s class!</p>",
"image": "charisse.jpg"
},
{
"id": "6",
"name": "Kenny",
"description": "<p>Having been on both ends of the scale, Kenny believes that we all stand at different starting lines in our fitness journey. Embarking on his own journey and achieving a personal goal of being a healthier version of himself, he stands by the importance of finding a comfortable pace and working your way up.</p> <p> Kenny challenges his riders to dig deep and find the best versions of themselves without compromise and comparison. From the latest and greatest to throwback pop hits, Kenny is all about serving infectious, unapologetic energy. Be sure to leave Kenny's classes feeling recharged physically and mentally.</p> ",
"image": "kenny.jpg"
},
{
"id": "7",
"name": "Matthew",
"description": "<p>Matthew first fell in love with the CRU culture in 2016 when he began as an avid rider, braving the front row almost daily when he wasn't playing video games. He dreamt of rocking the CruCycle stage himself, so he decided to audition as a Pack Leader and has never looked back!</p> <p>He brings on the extra fun in class and pushes you a little further on the bike. Proving that you can accomplish anything as long as you stay faithful to your vision, Matthew does so in style.</p> ",
"image": "matthew.jpg"
}
]
你需要用id过滤出你的json,使用的是 array_filter()
所以您可以通过索引值,即 id
$id = $_GET['id'];
$data = file_get_contents("http://cru68.test/assets/js/data-instructor.json");
$data = json_decode($data, TRUE);
$data = array_filter($data, function ($var) use ($id) {
return ($var['id'] == $id);
});
另外,如果你不想要
foreach()
因为您在讲师信息页面只有一个讲师,所以您可以很容易地把讲师的名字写上去,如$data['name']
或描述如$data['description']
那么你就需要使用下面这个代码段-。
$data = array_values(array_filter($data, function ($var) use ($id) {
return ($var['id'] == $id);
}))[0];