动态更新列表中的数据

Question

First post here on stack overflow.

I'm creating a YouTube stream monitor to keep an eye on multiple streams simultaneously and all was going well until i tried to work out how to update the data. Ive connected to the API, got the data into a json format and got the page working well. The problem now comes with updating the data and whilst i could just refresh the data section every x seconds that would cause the embedded video to refresh every time.

<?php
$url = "data_template.json"; //static json for development
$json = file_get_contents($url);
$data = json_decode($json);

$html = null;

foreach ($data->data as $program) {
    $html .= "<li id='1'>
              <img src='images/test.jpg' width='100%'>
              <!--YouTube Stream <iframe> embed -->
              <button>Public</button><button disabled>Preview - Not Enabled</button>
              <h4> {$program->broadcast->title} ( {$program->broadcast->id} )</h4>
              <p id='broad'>Broadcast Status: {$program->broadcast->lifeCycleStatus} </p>
              <p>Stream Status:  {$program->stream->streamStatus}  and  {$program->stream->healthStatus} </p>
              <p>Last Updated:  {$program->stream->lastUpdate} </p>
              </li>";
        };

echo $html;

?>   

I would like to update the variables within the paragraphs of each list but am struggling to work out how to get to them. Ive tried the below but it doesn't seem very efficient.

<script>
var x = document.getElementById("1");
    x.querySelector("#broad").innerHTML = "Hello World!";
</script>

Would i be better adding an intermediate step and having different variables in the HTML that can be individually ID'd and updated?

Answer 1

• First, I would change your <li> tags to <div> tags, its more presentable and more concise with W3C standards.
• Next you need to come up with the JS that would get the element you desire. You should highly consider jQuery. Its way easier to handle for a beginner like yourself.
• Finally, when creating your HTML add a class to each element you will need to update with JS later.

So for example if your HTML is like this:

<script src="//code.jquery.com/jquery-1.10.2.js"></script><!-- jQuery lib -->

<div class="video_block">
    <img src='images/test.jpg' width='100%'>
    <button>Public</button>
    <button disabled>Preview - Not Enabled</button>
    <h4><span class="title_1">Something</span> ( <span class="title_2">Something</span> )</h4>
    <p>Broadcast Status: <span class="b_status">Something</span> </p>
    <p>Stream Status:  <span class="s_status_1">Something</span>  and  <span class="s_status_2">Something</span> </p>
    <p>Last Updated:  <span class="u_status">Something</span> </p>
</div>
<div class="video_block">
    <img src='images/test.jpg' width='100%'>
    <button>Public</button>
    <button disabled>Preview - Not Enabled</button>
    <h4><span class="title_1">Something</span> ( <span class="title_2">Something</span> )</h4>
    <p>Broadcast Status: <span class="b_status">Something</span> </p>
    <p>Stream Status:  <span class="s_status_1">Something</span>  and  <span class="s_status_2">Something</span> </p>
    <p>Last Updated:  <span class="u_status">Something</span> </p>
</div>

Then your jQuery can be:

<script>
   $('.video_block').each(function(){
       $(this).find('.title_1').text("something else");
       $(this).find('.s_status_1').text("something else");
       $(this).find('.u_status').text("something else");
   });
</script>

Hope this helps.