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!

Answer 1

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