jQuery html code generation with $.get and $.each

Question

I don't know what I am doing wrong.

var content = '';
$(document).ready(function() {
  $('a.main_group').click(function(){
    var t = $(this), gId = ('' + t.data('id')).split(',')[1];
    var div = $('li div.cbp-hrsub div.cbp-hrsub-inner');
    $.get(null, {__action: 'Get/Groups', groupId: gId, languageId: __lngId}, function (d){
      var obj = d.action.Object;
      $.each(obj, function(i, el){
        $.get(null, { __action: 'Get/Groups', groupId: el.Id, languageId: __lngId}, function (node){
          var obj2 = node.action.Object;
          $.each(obj2, function(i, el){
            content += "<div><h4>"+el.Title+"</h4>";
            content += "<ul>";
            $.get(null, {__action: 'Get/Groups', groupId: el.Id, languageId: __lngId}, function(node2){
              var obj3 = node2.action.Object;
              $.each(obj3, function(i, el){
                content += "<li><a href='"+el.Url +"'>"+el.Title+"</a></li>";
              });
            });
            content += "</ul></div>";
          });
        });
        content += "</div></div>";
        console.log(content);
      });
    });
  });
});

I need to generate HTML code with jQuery but I get only: <div></div>

If I change every assign content += '' to console.log, everything is fine. It looks like the content variable is being initialized every time. How can I fix this?

Well for starters your code doesnt even append `var content` anywhere on the DOM — Deckerz, Sep 12 '17 at 08:32
You are not appending it to your HTML, just because you are assigning it a variable name doesnt mean it magically appears in the DOM — Deckerz, Sep 12 '17 at 08:34
That doesn't matter if I'm logging it in console.log or append, it is always showing last closing divs — TronComputers, Sep 12 '17 at 08:35
You really need to read [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Sep 12 '17 at 08:53
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Liam, Sep 12 '17 at 08:54

score 2 · Answer 1 · answered Sep 12 '17 at 08:42

2

As I understand $.get is asynchronous. So

    content += "</div></div>";
    console.log(content);

executes before the any other content+= assignment. Looks like you need a little bit redesign your code

answered Sep 12 '17 at 08:42

Vasyl Moskalov

4,242
3
20
28

score -1 · Accepted Answer · answered Sep 12 '17 at 08:36

-1

I think i know what you want so try this.

var content = '';
$(document).ready(function() {
  $('a.main_group').click(function(){
    var t = $(this), gId = ('' + t.data('id')).split(',')[1];
    var div = $('li div.cbp-hrsub div.cbp-hrsub-inner');
    $.get(null, {__action: 'Get/Groups', groupId: gId, languageId: __lngId}, function (d){
      var obj = d.action.Object;
      $.each(obj, function(i, el){
        $.get(null, { __action: 'Get/Groups', groupId: el.Id, languageId: __lngId}, function (node){
          var obj2 = node.action.Object;
          $.each(obj2, function(i, el){
            content += "<div><h4>"+el.Title+"</h4>";
            content += "<ul>";
            $.get(null, {__action: 'Get/Groups', groupId: el.Id, languageId: __lngId}, function(node2){
              var obj3 = node2.action.Object;
              $.each(obj3, function(i, el){
                content += "<li><a href='"+el.Url +"'>"+el.Title+"</a></li>";
              });
            });
            content += "</ul></div>";
          });
        });
        content += "</div></div>";
        console.log(content);
        $("YOUR SELECTOR HERE").html(content);
      });
    });
  });
});

You need to actually append your generated HTML.

answered Sep 12 '17 at 08:36

Deckerz

2,606
14
33

That's wird and definitely I'm an idiot. Why console.log is not showing code? – TronComputers Sep 12 '17 at 08:39
@TronComputers what do you mean? – Deckerz Sep 12 '17 at 08:40
console.log(content); <- this one doesn't work $("YOUR SELECTOR HERE").html(content); <- this one works fine – TronComputers Sep 12 '17 at 08:41
Okay cool, glad it works, if could have been the console was trimming the string if it was huge. Can you please mark this as the answer then if it has worked for you @TronComputers – Deckerz Sep 12 '17 at 08:42
1

This still suffers from the fundamental problem that it ignores the fact that `get` is asynchronous. [You can't modify `content` inside a async (`get`) method and expect it to work as though it's synchronous](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron). I would be very surprised if this code works any better than the code in the origina question – Liam Sep 12 '17 at 08:56
@Liam he didn't ask to fix the fundamental problem, that is out of scope for the question. My answer works for him so whats with the downvote? – Deckerz Sep 12 '17 at 08:58
You haven't fixed the problem, this answer is wrong. The OP may not know it yet but trust me, you've fixed nothing here. – Liam Sep 12 '17 at 09:05
@Liam do you not read comments, he literally said that it worked for him. – Deckerz Sep 12 '17 at 09:14

jQuery html code generation with $.get and $.each

2 Answers2