How to loop over an html with javascript?

Question

I have an HTML code which looks like this:-

<article class="media content-section">
    <div class="media-body">
        <h2><a class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>
        <div class="article-metadata">
            <a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>
            <div class="float-right">
                <small class="text-muted">Category</small>
                <small class="text-muted">{{ post.date_posted }}</small>
            </div>
            <div style="float:right;">
                <img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">
                    <p style="float: right; display: inline !important;" id="ViewCount">
                     .....
                    </p>
                </img>
            </div>
        </div>
        <p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
    </div>
</article>

I am trying to add the values of viewcount asynchronously to all the blogs field. With this js/ajax code:-

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){

        setInterval(function()
        {
      $.ajax({
          type:'GET',
          url: "{% url 'getBlogs' %}",
          success: function(response){
          $("#ViewCount").empty();
          for (var key in response.blogs)
          {
              console.log(response.blogs);
              var temp = response.blogs[key].view_count
              $("#ViewCount").append(temp);
          }

          },
          error:function(response){
              alert("No Data Found");
          }
      });
        },1000);
    });
</script>

I have many such blogs, But the values seem to be displayed all at once at only a single field which looks like this:-

But I am trying to display the viewcount of each blogs to its dedicated position. Is there I anyway I can achive it.

fatalcoder524 · Accepted Answer · 2020-09-18 20:58:14Z

1

One of the easiest way is to use HTML markup to differentiate different viewCount using data attributes.

blogs={
    "1":{ 
    "view_count":1
  },
 "2": {
        "view_count":15
  }
}
for (var key in blogs)
 {
   var temp = blogs[key].view_count
   $(`[data-key=${key}]`).append(`${temp} views`);           
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-key="1" id="ViewCount">Key:1 :- </p>
<p data-key="2" id="ViewCount">Key:2 :- </p>

answered Sep 18, 2020 at 20:58

fatalcoder524

1,4811 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to loop over an html with javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related