PHP - 将 JSON 字符串转换为 HTML Select

Question

I am trying to convert a JSON string to html <select> options, but need to achieve all this in PHP without JS or jQuery.Appreciate any help.

Some background: the JSON result contains 2 columns, timestamp and chapter_name , which is used for a video to jump to the location of x seconds via a select dropdown where the user can choose which chapter he wants to jump to.

$json_str = '{"timestamp":"0","chapter_name":"Introduction"},{"timestamp":"20","chapter_name":"Chapter 1"},{"timestamp":"40","chapter_name":"Chapter 2"},{"timestamp":"100","chapter_name":"Chapter 3"}';

$timestamps_arr = json_decode($json_str, true);
$timestamps_output = "
    <label for=\"sel_timestamps\">Jump to: </label>
    <select id=\"sel_timestamps\" name=\"sel_timestamps\" onchange=\"VidTimeJump()\">";

foreach($timestamps_arr as $timestamp){
    echo '<option value="'.$timestamp['timestamp'].'">'.$timestamp['chapter_name'].'</option>';
}

$timestamps_output .= "
    </select>";

Answer 1

The JSON you're using is invalid. To make your code work you should also append your <option> s ( $timestamps_output.=... ) instead of echo ing them right away. You'll end up with a string $timestamps_output that contains your <label> and <select> including your options.

$json_str = '[{"timestamp":"0","chapter_name":"Introduction"},{"timestamp":"20","chapter_name":"Chapter 1"},{"timestamp":"40","chapter_name":"Chapter 2"},{"timestamp":"100","chapter_name":"Chapter 3"}]';

$timestamps_arr = json_decode($json_str, true);
$timestamps_output = "
    <label for=\"sel_timestamps\">Jump to: </label>
    <select id=\"sel_timestamps\" name=\"sel_timestamps\" onchange=\"VidTimeJump()\">";

foreach($timestamps_arr as $timestamp){
    $timestamps_output .= '<option value="'.$timestamp['timestamp'].'">'.$timestamp['chapter_name'].'</option>';
}

$timestamps_output .= "
    </select>";

Use echo $timestamps_output; to output

<label for="sel_timestamps">Jump to: </label>
<select id="sel_timestamps" name="sel_timestamps" onchange="VidTimeJump()"><option value="0">Introduction</option><option value="20">Chapter 1</option><option value="40">Chapter 2</option><option value="100">Chapter 3</option>
</select>