Why does my .text() manipulation not work after an AJAX call?

Question

Why my split and join are not working??

$.getJSON(url, function (data) {
    // create ".tags" elements and populate them with data
});
$(".tags").text(function (i, val) {
   return val.split(",").join(", ");
});

Fiddle

I just simply want to add space after every ',' (comma).

You are splitting it before getting any result from JSON response. — GoodSp33d, Jun 30 '14 at 06:08
Using AJAX is a pretty important detail to leave out of the question. — Ja͢ck, Jun 30 '14 at 06:09
possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Phil, Jun 30 '14 at 06:10
@Phil Its not a dup of that linked question. Theres no return value here. — GoodSp33d, Jun 30 '14 at 06:11
@GoodSp33d The implementation is slightly different but the [accepted answer](http://stackoverflow.com/a/14220323/283366) outlines the problem and solution — Phil, Jun 30 '14 at 06:12
But that question is totally different from mine.. and Phil if i could have any idea of my mistake then i surely didnt ask this question here. what you say @GoodSp33d — Richa, Jun 30 '14 at 06:16
@Era read the accepted answer on that post (all of it) and you will understand where you went wrong and how you can fix the problem — Phil, Jun 30 '14 at 06:18
@Era Nobody is blaming you for asking a question that's been asked before (in fact, this particular question is asked almost every day); what's important, though, is to write the smallest code to reproduce the issue **in the question itself**. — Ja͢ck, Jun 30 '14 at 06:19
But Phill .. before searching for solution, you must know the problem behind this.. and i was not aware about the issue.. — Richa, Jun 30 '14 at 06:20
No.. I am not talking about blaming .. i m just worried about down votes.. :( — Richa, Jun 30 '14 at 06:21
@Era getting marked as a duplicate isn't a bad thing. It just reduces clutter on StackOverflow — Phil, Jun 30 '14 at 06:21

score 7 · Accepted Answer · answered Jun 30 '14 at 06:08

As $.getJSON is async call, you need to perform your operation in callback method of $.getJSON

$.getJSON('http://www.json-generator.com/api/json/get/bXClHuexaq?indent=2', function (data) {
  //... your code

    $(".tags").text(function (i, val) {
        return val.split(",").join(", ");
    });
 });

Fiddle

score 3 · Answer 2 · answered Jun 30 '14 at 06:09

3

As Satpal had mentioned using $.getJSON is required

$.getJSON(url, function (data) {
    // code
    $(".tags").text(function (i, val) {
        return val.split(",").join(", ");
    });
 });

However, as a general practice I'd recommend to use regular expression instead, mainly because for longer strings arrays need more memory

$(".tags").text(function(i, val) {
    return val.replace(/,/g, ", ");
});

answered Jun 30 '14 at 06:09

vasa

787
8
21

2

@Darren That's a little harsh. OP didn't include all the relevant information in their post – Phil Jun 30 '14 at 06:11
@Darren What do you mean by L2R..? – Rajaprabhu Aravindasamy Jun 30 '14 at 06:12
@RajaprabhuAravindasamy [**Learn 2(to) Read**](http://www.urbandictionary.com/define.php?term=l2r) – Darren Jun 30 '14 at 06:13

score 0 · Answer 3 · answered Jun 30 '14 at 06:12

Place your split logic in callback.Check out the following jsfiddle

http://jsfiddle.net/8TdZ3/6/

$(document).ready(function (e) {
    $.getJSON('http://www.json-generator.com/api/json/get/bXClHuexaq?indent=2', function (data) {
        var output = "<table width='100%' cellspacing='0' cellpadding='0'>";
        output += "<tr>";

        output += "<th width='20%'>" + 'Tags' + "</th>";
        output += "<th width='15%'>" + 'Friends' + "</th>";
        output += "</tr>";
        for (var i in data) {
            output += "<tr>";

            output += "<td class='tags'>" + data[i].tags + "</td>";
            output += "<td>";
            for (var j = 0; j < data[i].friends.length; j++) {
                output += "<div>" + data[i].friends[j].name + "</div>";
            }
            output += "</td>";
            output += "</tr>";
        }
        output += "</table>";

        document.getElementById("placeholder").innerHTML = output;
          $(".tags").text(function (i, val) {
        alert(i);
        return val.split(",").join("#");
    });

    });

});

Why does my .text() manipulation not work after an AJAX call?

3 Answers3