4

What I have is this.

The HTML

<div id="catcher"></div>

The jQuery

jQuery.ajax({
  url:'./ajax.html', 
  async: true, 
  success: function(response){
    for (var key in response){
      jQuery('#catcher')
        .append("<ul>"+ key +"<li>" + response[key].toString() + "</li></ul>");
    }
  }
})

The JSON looks like 

{
    "Item":"Item Name",
    "Item 1":"Item Name",
    "Item 2":"Item Name",
    "Item 3":"Item Name",
    "Item 4":"Item Name"
}

I would like to make a UL like this

  1. Item
    • Item Name
  2. Item 1
    • Item Name

And so on. What I am getting now is each individual letter of the value of the object and a numbers for the key. Instead I want them both to be equal to the strings.

worc
  • 3,654
  • 3
  • 31
  • 35
maxsands1503
  • 157
  • 2
  • 15

5 Answers5

3

You should try to add console.log(response) to your success callback. It will probably show that response is a string and not an object.

In this case you can add dataType:'json' to the jQuery.ajax(...) call, as explained here : how to parse json data with jquery / javascript?

Community
  • 1
  • 1
gregfqt
  • 242
  • 3
  • 14
2

You're missing an outer ordered-list. If you append that first and change your looped append to have a nested <ul> you should get the structure you're looking for:

var data = {
  "Item": "Item Name",
  "Item 1": "Item Name",
  "Item 2": "Item Name",
  "Item 3": "Item Name",
  "Item 4": "Item Name"
}

$('#catcher').append('<ol></ol>');

for (var key in data) {
  $('#catcher ol').append('<li>' + key + '<ul><li>' + data[key] + '</li></ul></li>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="catcher"></div>
worc
  • 3,654
  • 3
  • 31
  • 35
  • I like this solution a lot, but I think there is something wrong with the JSON. Instead of getting strings for the keys I get a series of number 1-112, which is the number of characters in the strings off all the keys combined. I also only get one character of the value strings as an item, instead of the whole string. Ideas? – maxsands1503 Oct 21 '16 at 21:43
  • 1
    @MaxwellSands it sounds like the JSON is still an unparsed string. gregfqt's [answer](http://stackoverflow.com/a/40185678/769780) is probably what you're looking for. – worc Oct 21 '16 at 21:46
1
    jQuery.ajax({
      url: './ajax.html',
      async: true,
      success: function(response) {
        var ol = "<ol>";
        for (var key in response) {
          ol += "<li>" + key + "<ul><li>" + response[key] + "</li></ul>" + "</li>";
        }
        ol += "<ol>";
        jQuery('#catcher').append(ol);
      }
    });
Mamdouh Saeed
  • 2,302
  • 1
  • 9
  • 11
1

Try out this code. See if it helps: 

   jQuery.ajax({url:'./ajax.html', async: true, success: function(response){

                        var addcode=" ";
                        var i=1;

                        $.each(response, function(key,value) {

                                addcode +=  '<ul>' + (i++)  + '. ' + key;
                                addcode += '<li>' + value + '</li>';
                                addcode += '</ul>';

                        });
                        jQuery('#catcher').html(addcode);
    }})
Aakash Thakur
  • 3,837
  • 10
  • 33
  • 64
0

Try below code, Below code sample is used to loop only json attributes.

$.each( response, function( key, value ) {

alert( key + ": " + value );

});

prabhu379
  • 69
  • 3