Function building html string needing to include results from another function
<p>I have a jQuery function that is building an HTML string (outStr), as follows:</p>

<pre><code>    function ShowUserInfo()
    {
        var userId = $("#users").val();
        if (userId == -1)
        {
            $("#userInfo").hide();
        }
        else
        {
            $.getJSON('Services/foobar.svc/GetUserById?userId=' + userId,
                function (data) {
                    var outStr = "";
                    $.each(data, function (index, elem) {
                        //var d = new Date(elem.DateOfBirth);
                        outStr += "&lt;div class=\"user\"&gt;" +
                                "   &lt;h3&gt;" + elem.Forename + " " + elem.Surname + "&lt;/h3&gt;" +
                                "   &lt;p&gt;Date of birth: " + elem.DateOfBirth + "&lt;/p&gt;"
                    });
                    outStr += "&lt;h4&gt;Associated items&lt;/h4&gt;"
                    outStr += [*** To do: add results from function ShowUserItemInfo ***];
                    outStr += "&lt;/div&gt;"
                    $("#userInfo").show().html(outStr);
                }
            );
        }
    }
</code></pre>

<p>Note the <strong>*To do *</strong> part: this is where I am having trouble. I have another function (ShowUserItemInfo) that also builds an HTML string in a similar way. What I would like is to simply be able to call that function and append its resulting HTML string to outStr.</p>

<p>But I just can't get it to work.</p>
