使用循环在HTML中显示来自jQuery.ajax的json数据

时间:2017-07-17 00:36:22

标签: jquery html json ajax

你好假设我有以下ajax调用:

jQuery.ajax({
    type: "GET",
    url: "https://myurl.com",
    success: function(data)
    {
        console.log(data);
    }
});

这导致以下json数据(在我的控制台中)

{
  "meta": {
    "last_updated": "2017-07-06"
  },
  "results": [
    {
      "term": "DRUG INEFFECTIVE",
      "count": 1569
    },
    {
      "term": "NAUSEA",
      "count": 1374
    },
    {
      "term": "FATIGUE",
      "count": 1371
    }
  ]
}

如何使用以下格式填充HTML页面中的div

term: x
count: xx

term: x
count: xx

term: x
count: xx

我对“meta”的东西只对“结果”感兴趣

任何人都知道如何使用简单的循环来显示这些数据吗?

谢谢!

3 个答案:

答案 0 :(得分:2)

您可以在"成功功能"中循环浏览data.results,如下所示:

jQuery.ajax({
    type: "GET",
    url: "https://myurl.com",
    success: function(data)
    {
        console.log(data);

        jQuery.each(data.results, function(i, val) {
            // here you can do your magic
            $("#yourdivid").append(document.createTextNode(val.term));
            $("#yourdivid").append(document.createTextNode(val.count));
        });
    }
});

答案 1 :(得分:0)

您想要以json格式接收的成功数据,为此,您首先需要将其转换为数组以获取数据

data = jQuery.parseJSON(data);

这将帮助您接收数组格式的数据,然后您将对数据做任何想做的事情。

有关更多信息,请查看以下答案How to display JSON data with jQuery Ajax?

答案 2 :(得分:-1)

StudentViewModel EmpInfo = new StudentViewModel();

        HttpClient client1 = new HttpClient();
        client1.BaseAddress = new Uri("http://localhost:2585/");

        client1.DefaultRequestHeaders.Accept.Add(
            new MediaTypeWithQualityHeaderValue("application/json"));

        var responsecountry = client1.GetAsync("api/Country/").Result;
        List<SelectListItem> country = new List<SelectListItem>();


        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri("http://localhost:2585/");

        client.DefaultRequestHeaders.Accept.Add(
            new MediaTypeWithQualityHeaderValue("application/json"));

        var response = client.GetAsync("api/StudentApi/" + id).Result;


        if (response.IsSuccessStatusCode)
        {
            EmpInfo = JsonConvert.DeserializeObject<StudentViewModel>(response.Content.ReadAsStringAsync().Result);
            if (responsecountry.IsSuccessStatusCode)
            {
                country = JsonConvert.DeserializeObject<List<SelectListItem>>(responsecountry.Content.ReadAsStringAsync().Result);
                EmpInfo.Country = country;
            }
            return PartialView(EmpInfo);
        }