Generate multiple HTML elements from JSON using Jquery?

Question

How to use Jquery and Javascript to extract JSON from $ajax and then do a foreach, and create a string that will append to html DOM?

Something like:

$(document).ready(function (e) {

$.ajax({
    type: "POST",
    url: "Companies/GetSearchRatios",
    context: this,
    success: function (data) {
       //return JSON
    }
});

Result JSON

[{"name":"MyNAme","value":350},{"name":"Hello","value":356}]

I can easily acces this values inside $ ajax method success, but how can I extract this value outside of method and use it to append to DOM?

This is what I need as a result of some for/foreach method:

  var $gElemRatios =
    '<option value=""></option>' +
    '<option value="350">MyNAme</option>' +
    '<option value="356">Hello</option>';

Then I use this var to combine with another:

 var $gElem =
    '<div class="cbox cboxQuarterWidth">' +
         '<select id="combobox_0">' +
               $gElemRatios + // here I add previous generated elem
         '</select>' +
    '</div>';

And finally:

$("#main").append($gElem);

Any ideas?

m90 · Accepted Answer · 2012-03-26 13:13:46Z

3

You can use $.each to loop through the data passed to the success handler:

$.ajax({
    type: "POST",
    url: "Companies/GetSearchRatios",
    context: this,
    success: function (data) {
       $.each(data,function(){
          console.log(this.name); //just an example how to access things
          $('#select').text(this.value); //maybe?
       });
    }
});

See this fiddle

edited Mar 26, 2012 at 13:13

answered Mar 26, 2012 at 12:20

m90

11.8k16 gold badges69 silver badges120 bronze badges

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

8 Comments

Davor Zubak Over a year ago

ok, great, how can i create string as show in question and get this var outside of success method?

Davor Zubak Over a year ago

I need this string as a var, global, I cannot directly append data to DOM, because of other things...

m90 Over a year ago

@Ingol create an array or object in the scope that you need and use it to store your data.

Davor Zubak Over a year ago

well I thing this is my main problem, together with creating multiple strings, because of success asynchronous, my scope is undefined?

m90 Over a year ago

No that should not be the problem. See: jsfiddle.net/zDJez/1 for a basic approach. Also see the cat example here: api.jquery.com/jQuery.getJSON

|

Collectives™ on Stack Overflow

Generate multiple HTML elements from JSON using Jquery?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related