Заполните ul из базы данных JSON по HTTP — запросу

#javascript #json #localhost #httprequest

Вопрос:

Я застрял на этой проблеме. У меня есть база данных JSON, и я хочу запросить данные из нее по HTTP. После этого я хочу внести ли в ul с данными, которые я получил в качестве ответа. Вот мой код:

 <!DOCTYPE html>
<html>
<head>
    <title>X</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <script>
        function requestBrands()
    {
        adress="http://localhost:3000/brands?callback=?"
        $.getJSON(adress ,function(answer)
        {
            var ul = document.getElementById("x");
            $.each(answer, function(index, brands)
            {               
                ???????
            }
            )
        }
        )
    };
    </script>
</head>
<body>

<div>
<button onclick="solicitareMarca()">Brands categ</button>
</div>

<div >
    <h3">Brands</h3>
    <ul id="x">
    </ul>
</div>

</body>
</html>

 

БАЗА ДАННЫХ JSON:

 {
  "brands":[
    {
      "id":1,
      "name":"Audi"
    },
    {
      "id":2,
      "name":"BMW"
    }
  ]
}
 

Я не могу найти, как ввести данные в ul.

Комментарии:

1. В вашем коде- answer это весь объект со brands свойством. Это объект, поэтому вы не можете этого сделать $.each(answer... . Вы можете сделать answer.brands.forEach((brand, i) => { /* ... */ });

Ответ №1:

Вы можете сделать это, используя приведенный ниже код

  $.each(answer.brands, function(index, brand)
 {               
    $("#x").append(`<li> Id:${brand.id} Car name: ${brand.name} </li>`);
 }       
 

Но поскольку ваш ответ содержит бренды в виде массива, пожалуйста, передайте answer.brands в качестве аргумента для $.each(answer.brands) функции вместо $.each(answer) .