通过 HTTP 请求从 JSON 数据库填充一个 ul

Question

我被这个问题困住了。我有一个 JSON 数据库，我想通过 HTTP 从它请求数据。在那之后，我想用我得到的数据作为答案让 li 在 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 中注入数据。

Answer 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)。

通过 HTTP 请求从 JSON 数据库填充一个 ul

Populate an ul from a JSON database by HTTP request

javascript

json

localhost

httprequest