массив не извлекает данные в HTML?

Question

Я пытаюсь сделать список новостей более динамичным c, поэтому я попытался сделать его в массиве и l oop в категориях, но, к сожалению, функция getw () не получает данные?

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-5">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
      aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
      <ul class="navbar-nav ml-auto ml-2 mt-lg-0" id="line">

      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row" id="posts-row">
    </div>
  </div>

java script code 

var list = ["General", "Entertainment", "Health", "Science", "Sports", "Technology"];

function getw() {

    var lines = "";

    for (var i = 0; i < list.length; i++) {
        lines += `<li>
                <a class='nav-link' href='#'>` + list[i] + `</a>
                </li>`
    }

    document.getElementById("line").innerHTML = lines; (not working i don't know why ?)
}



getdata("general")

var links = document.getElementsByClassName("nav-link");
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function (e) {
        var currentCat = e.target.text;
        getdata(currentCat.toLowerCase())
    })

}

var data;

function getdata(category) {
    var httpReq = new XMLHttpRequest();
    httpReq.open("GET", "http://newsapi.org/v2/top-headlines?country=eg&category=" + category + "&apiKey=d4f87946d7fc4322be9c2089316d5625");

    httpReq.send();

    data = [];

    httpReq.addEventListener("readystatechange", function () {


        if (httpReq.readyState == 4) {
            data = JSON.parse(httpReq.response).articles;
            Display();
        }

    })
}



function Display() {

    var temp = "";

    for (var i = 0; i < data.length; i++) {

        temp += `<div class ='col-md-4'>
                <div>
                <img src=`+ data[i].urlToImage + ` class='img-fluid'>
                <h4>`+ data[i].title + `</h4>
                <p>`+ data[i].description + `</p>
                    </div>
                </div>`
    }
    document.getElementById("posts-row").innerHTML = temp;
}

......................................... .................................................. ..///////////////////////////////////////////

Answer 1

По крайней мере, в коде, который вы опубликовали, вы не вызываете функцию getw. Попробуйте добавить getw() в конце вашего JavaScript.