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

Posted 2023-03-05

【中文标题】使用循环在 HTML 中显示来自 jQuery.ajax 的 json 数据

【英文标题】：Display json data from jQuery.ajax in HTML using loop

【发布时间】：2017-12-21 10:03:58

【问题描述】：

您好，假设我有以下 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

我对“元”的东西不感兴趣，只对“结果”感兴趣

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

谢谢！

【问题讨论】：

在success: function(data) ... “for循环”到data.results，然后使用jQuery填充目标div。

【参考方案1】：

您可以在“成功函数”中循环访问您的 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));
        );
    
);

【讨论】：

谢谢你，克里斯，你能帮我看看在 createTextNode 中放什么吗？

太棒了，非常感谢，这正是我正在寻找的答案！

【参考方案2】：

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

data = jQuery.parseJSON(data);

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

有关更多信息，请查看这些答案How to display JSON data with jQuery Ajax?

【参考方案3】：

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

【讨论】：

这可能是一个有效的答案，但显然不是那个问题（恰好已经有一个接受的答案）