How to foreach after parsing json response got via ajax in jquery?

Question

I am having an array for list of all banks that i want to append inside li:-

HTML:
    <div id="bank_name">
    <ul>
      <li></li>
    </ul>
    </div>

i am having an getting an array after jsonParse in this format:-

[{"bank name":"Australian Military Bank"},{"bank name":"Adelaide Bank"},{"bank name":"Advantedge"},{"bank name":"American Express"},{"bank name":"AMP"},{"bank name":"ANZ"},{"bank name":"Auswide Bank"},{"bank name":"AWA Alliance Bank"},{"bank name":"Bank of Us"},{"bank name":"Bank Australia"},{"bank name":"BankFirst"},{"bank name":"BankMeCU"},{"bank name":"BankSA"},{"bank name":"BankSA Business Banking"},{"bank name":"Bank of Sydney"},{"bank name":"BankVic "},{"bank name":"Bankwest"},{"bank name":"Bank of CAPTCHA"},{"bank name":"Bank of Custom Data"},{"bank name":"Bank of MFA"},{"bank name":"Bank of Mortgage"},{"bank name":"Bank of Optional MFA"},{"bank name":"Bank of Password"},{"bank name":"Bank of Statements"}]

The code I used to append it inside the div

Jquery:-

$.ajax({
        ...
        success: function(response) {
          var new_list = var obj = jQuery.parseJSON(response); 
          $(new).each(function(i, val ) {
             $('#bank_name li').append(val);
           });
         }
       });

I tried even by using the previous answers but it didn't helped me.

@patilprashant6792 That's not correct, JSON can indeed have property names that include spaces — CertainPerformance, Aug 06 '18 at 06:23
Check if this can help you - https://stackoverflow.com/questions/5716792/json-fieldnames-spaces — patilprashant6792, Aug 06 '18 at 06:25
yes, i know because i have created an array at the backend in which i have setted bank name and then after decoding the array i am sending it . — Rahul shukla, Aug 06 '18 at 06:25

score 1 · Accepted Answer · answered Aug 06 '18 at 06:29

1

Your loop can be something like this

$.each(data, function(i, item) {
        $("#bank_name ul").append("<li>"+item["bank name"]+"</li>");
});

Working Fiddle

answered Aug 06 '18 at 06:29

MyTwoCents

7,284
3
24
52

score 0 · Answer 2 · answered Aug 06 '18 at 06:25

There are few issues in your code:

You cannot use new as it is a reserved keyword in JavaScript
You need to append the HTML in <ul> tag with this list of <li> tag that has the value of bank name property

var _new = [{"bank name":"Australian Military Bank"},{"bank name":"Adelaide Bank"},{"bank name":"Advantedge"},{"bank name":"American Express"},{"bank name":"AMP"},{"bank name":"ANZ"},{"bank name":"Auswide Bank"},{"bank name":"AWA Alliance Bank"},{"bank name":"Bank of Us"},{"bank name":"Bank Australia"},{"bank name":"BankFirst"},{"bank name":"BankMeCU"},{"bank name":"BankSA"},{"bank name":"BankSA Business Banking"},{"bank name":"Bank of Sydney"},{"bank name":"BankVic "},{"bank name":"Bankwest"},{"bank name":"Bank of CAPTCHA"},{"bank name":"Bank of Custom Data"},{"bank name":"Bank of MFA"},{"bank name":"Bank of Mortgage"},{"bank name":"Bank of Optional MFA"},{"bank name":"Bank of Password"},{"bank name":"Bank of Statements"}]
var nHTML = '';
$(_new).each(function(i, val ) {
 nHTML += '<li>'+val['bank name']+'</li>'
});
$('#bank_name').html('<ul>'+nHTML+'</ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bank_name">
</div>

Aishwary Tiwari · Answer 3 · 2018-08-06T06:40:07.110

0

You can use eval function on you JSON response like this.

var data = eval(response);

you will be able to access all the values coming in your ajax response.

also, I prefer appending value after assigning all values to a variable, like this.

 var html = ''; 
 $.each(data, function(i, item) {
   html += "<li>"+data.bank name+"</li>";
});
 $("#bank_name").append(html);

edited Aug 06 '18 at 06:40

answered Aug 06 '18 at 06:28

Aishwary Tiwari

1,643
2
10
12

How to foreach after parsing json response got via ajax in jquery?

3 Answers3