How to display JSON data using jquery DOM selector?

Question

I want to display json.articles[i].title of each news on my website here is my screenshot of website and my code:

In main.js:

(function() {

    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key', function(json) {
        $("#sidebar-wrapper li").each(function() {
            $('li').html(json.articles[0].titles)
        });
    });
})();

My HTML file :

<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <strong>Latest Headines</strong>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
    </ul>
</div>

Here is my screenshot of website I want to display each news title from json.articles[].title instead of "Your news title".(For clarification see screenshot and HTML code).

Pankaj Makwana · Accepted Answer · 2017-06-15 08:06:28Z

3

Try Below Code

    (function () {

        $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b', function (json) {
            var html = "";
            $(json.articles).each(function (index, value) {
                $(".sidebar-nav").append("<li><a href='"+value.url+"'>" + value.title + "</a></li>");
            });
            

        });
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
                    <ul class="sidebar-nav">
                    </ul>
 </div>

answered Jun 15, 2017 at 8:06

Pankaj Makwana

3,0486 gold badges33 silver badges49 bronze badges

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

2 Comments

rock stone Over a year ago

if LI and <a> is created dynamically it will become difficult to style them later. Will it be ?

Pankaj Makwana Over a year ago

You can add class on li and and <a> that will work

Dij · Accepted Answer · 2017-06-15 07:58:44Z

1

If all you want is to iterate through the articles you can use an iterator index and keep incrementing it. Something like this.

(function(){
    var i = 0;
    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b',function(json) {
            $("#sidebar-wrapper li").each(function(){
            $('li').html(json.articles[i++].titles)
        });
        });
})();

But you it would be better to iterate over the articles object and create lists dynamically.

answered Jun 15, 2017 at 7:58

Dij

9,8184 gold badges21 silver badges35 bronze badges

3 Comments

Satpal Over a year ago

@rockstone, Why are you begging for upvote, are you here for votes?

rock stone Over a year ago

@Diwas Joshi you have declared var i = 0 but what if I want to add images, description, titles of NEWS should I make a separate variable for each iteration. What is good practice followed by developers.

Dij Over a year ago

@rockstone depends on where these images, description are. if these are in article iterator works. you won't need separate iterators for these. but as in the answer adding lists dynamically would be better.

Satpal · Accepted Answer · 2017-06-15 07:58:55Z

1

You should dynamically create the LI elements, as the no of article from JSON response may vary.

To create element use jQuery(html)

//Cache the ul element
var ul = $("#sidebar-wrapper ul.sidebar-nav");
//iterate the articles
$.each(json.articles, function(index, article) {
  //Create anchor
  var anchor = $('<a>', {
    href: article.url,
    text: article.title
  });
  //Create LI and append anchor after append the LI to UL
  $('<li>').append(anchor).appendTo(ul);
});

(function() {

  $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b', function(json) {
    var ul = $("#sidebar-wrapper ul.sidebar-nav");
    $.each(json.articles, function(index, article) {
      var anchor = $('<a>', {
        href: article.url,
        text: article.title
      });
      $('<li>').append(anchor).appendTo(ul);
    });
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
  <strong>Latest Headines</strong>
  <ul class="sidebar-nav">
  </ul>
</div>

answered Jun 15, 2017 at 7:58

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

rock stone Over a year ago

but if I dynamically create LI elements will it affect on loading data on website also instead if I want to display images should I dynamically create <img>. So my question is should I make HTML tags and then populate it using jquery or should I dynamically create it using jquery.

rock stone Over a year ago

need your help here -> stackoverflow.com/questions/44591722/…

Farhan · Accepted Answer · 2017-06-15 08:13:46Z

1

You can also update li data by using class

Try This

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){
    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b',function(json) {
        var x=document.getElementsByClassName("title");
        for(var i=0;i<x.length;i++)
            x[i].innerHTML = json.articles[0].titles;
    }); }); </script>

<div id="sidebar-wrapper">
                    <ul class="sidebar-nav">
                            <strong>Latest Headines</strong>
                        <li>
                            <a href="" class="title">Your news title</a>
                        </li>
                        <li>
                            <a href="" class="title">Your news title</a>
                        </li>
                        <li>
                            <a href="" class="title">Your news title</a>
                        </li>
                        <li>
                            <a href="" class="title">Your news title</a>
                        </li>
                        <li>
                            <a href="" class="title">Your news title</a>
                        </li>
                    </ul>  </div>

answered Jun 15, 2017 at 8:13

Farhan

4381 gold badge6 silver badges13 bronze badges

2 Comments

rock stone Over a year ago

but I want to display different NEWS in each li element.

Farhan Over a year ago

if you notice this line "x[i].innerHTML = json.articles[0].titles;" by using x[i] you can differentiate different li tags

Collectives™ on Stack Overflow

How to display JSON data using jquery DOM selector?

4 Answers 4

2 Comments

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related