Display json data from jQuery.ajax in HTML using loop

Question

Hello suppose I have the following ajax call:

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

That results in the following json data (in my console)

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

How can I populate a div in my HTML page with this data in a format something like:

term: x
count: xx

term: x
count: xx

term: x
count: xx

I am not interested in the "meta" stuff only the "results"

Anyone know how to use a simple loop to display this data?

Thanks!

within success: function(data) { ... } "for loop" through data.results and then use jQuery to populate the targeted div. — Chris
– Chris, Commented Jul 17, 2017 at 0:39

Chris · Accepted Answer · 2017-07-17 00:54:43Z

3

You can loop through your data.results within your "success function", like this:

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

edited Jul 17, 2017 at 0:54

answered Jul 17, 2017 at 0:46

Chris

3,4864 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cup_of Over a year ago

thank you chris, can you help me out with what to put in the createTextNode?

cup_of Over a year ago

awesome thank you very much this is exactly the answer I was looking for!

heySushil · Accepted Answer · 2019-12-14 05:45:21Z

0

You want the success data which you receive in json format and for that, you first need to convert it in array to get the data

data = jQuery.parseJSON(data);

this will help you to receive the data in an array format and then you will do whatever you want to do with the data.

For more info look at these answers How to display JSON data with jQuery Ajax?

answered Dec 14, 2019 at 5:45

heySushil

5097 silver badges13 bronze badges

Comments

Jaap · Accepted Answer · 2017-09-26 05:45:42Z

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

edited Sep 26, 2017 at 5:45

Jaap

83.7k36 gold badges190 silver badges203 bronze badges

answered Sep 26, 2017 at 5:22

harsh

11 bronze badge

1 Comment

Gilles Gouaillardet Over a year ago

this might be a valid answer, but clearly not for that question (which happens to already have an accepted answer)

Collectives™ on Stack Overflow

Display json data from jQuery.ajax in HTML using loop

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related