Auto Incrementing ID of each list output using php

Question

I have a code that project videos on youtube based on the youtube apiv3 my problem is how do I auto-increment the id of each li by 1 unit as it gets appended to the results I've tried several approaches using PHP to loop through the result but I keep getting an unwanted result.

<script>
    $.get(
      "https://www.googleapis.com/youtube/v3/playlistItems", data,
      function(data){
        var output;
        $('#results').html("");
        $.each(data.items, function(i, item){
          console.log(item);
          videoTitle = item.snippet.title;
          rvideoID = item.snippet.resourceId.videoId;
          vidThumburl = item.snippet.thumbnails.high.url;
          <?php $counter = 1; while($counter <= 10 ){ ?>
          output = '<li id="menu<?=$counter;?>" style="list-style:none;"><a class="videos2 video" href="https://www.youtube.com/watch?v=' + rvideoID + '">' + videoTitle + '<a/></li>';

          //Append to results list
          $('#results').append(output);
          <?php $counter++; } ?>
        });


        try{
          if(data.prevPageToken){
            $("#results").append('<li id="menu<?=$counter;?>" style="list-style:none;"><a class="" href="javascript:void(0);" onclick="javascript:getVids(pid, \'' + data.prevPageToken + '\');">&raquo; Prev Page<a/></li>');
          }
        }catch(err){
        }

        try{
          if(data.nextPageToken){
            $("#results").append('<li id="menu<?=$counter;?> style="list-style:none;"><a class="" href="javascript:void(0);" onclick="javascript:getVids(pid, \'' + data.nextPageToken + '\');">Next Page &laquo;<a/></li>');
          }
        }catch(err){
        }
    });
  }
</script>
<body>
<div id="container">
  <ul id="results"></ul>
</div>
</body>

php is executed on the server before runtime of the javascript. — happymacarts, Dec 22 '16 at 17:25
You might be better served to send an ajax request to a php page that hits the api and builds your output then sends that back to your container html results div — happymacarts, Dec 22 '16 at 17:27
*"I've tried several approaches using PHP to loop"* - There's no php real here, but you are injecting pure php inside js, why? and as stated already, you need ajax for this. — Funk Forty Niner, Dec 28 '16 at 23:01

score 0 · Answer 1 · answered Dec 25 '16 at 09:45

Just place your iterator into javascript-code

var counter = 1;
$.each(data.items, function(i, item){
    console.log(item);
    videoTitle = item.snippet.title;
    rvideoID = item.snippet.resourceId.videoId;
    vidThumburl = item.snippet.thumbnails.high.url;
    output = '<li id="menu' + counter + '" style="list-style:none;">' +
        '<a class="videos2 video" href="https://www.youtube.com/watch?v=' + rvideoID + '">' + videoTitle + '<a/>'+
        '</li>';

    //Append to results list
    $('#results').append(output);
    counter++;
});

Auto Incrementing ID of each list output using php

1 Answers1