CODEWITHSUNDEEP
javascriptjqueryjson
rock stone
rock stone

Reputation: 493

How to display JSON data using jquery DOM selector?

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).

enter image description here

Upvotes: 0

Views: 682

Answers (4)

Farhan
Farhan

Reputation: 440

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>

Upvotes: 1

Pankaj Makwana
Pankaj Makwana

Reputation: 3050

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>

Upvotes: 3

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 1

Dij
Dij

Reputation: 9808

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.

Upvotes: 1

Related Questions