Javascript explode issue

Question

I am running an ajax query and returning JSON and one of the results is a field named image.comment e.g.

test~63~Dave Sanders~http://graph.facebook.com/998433599/picture?type=large~Dave Sanders~9 minutes ago

I'm using ~ as a separator

There maybe be multiple similar sets of data separated by ---- in image.comment so to parse the data and add it to the DOM i'm using:

if(image.comment){

        html += '<div class="msgs_holder'+image.list_id+'">';

        // split comment at ----        
        var comString = image.comment;
        var comArray = comString.split("----");

        var lengthArray = comArray.length,
        element = null;

        for (var i = 0; i < lengthArray; i++) {
            element = comArray[i];

            // split indiv comment at ~     
            var comUserString = element;
            var comUserArray = comUserString.split("~");

            html += '<div class="msgs_row"><div class="msgs_pic"><a href="/'+comUserArray[4]+'"><img src="'+comUserArray[3]+'"></a></div>';
            html += '<div class="msgs_comment"><a href="/'+comUserArray[4]+'" style="text-decoration:none;"><span class="msgs_name">'+comUserArray[2]+'</span></a> '+comUserArray[0]+'<br><span class="msgs_time" title="'+comUserArray[5]+'">'+comUserArray[5]+'</span></div></div>';

        }

        html += '</div>';

    }

But the page fails to load and firefox firebug tells me: allocation size overflow

This only happens on rows of the JSON where there is data in comment column

I suspect some maybe infinite looping but can't see it

I've checked the query and it runs fine so not that

Is this the best way to explode in js?

Any ideas?

MORE INFO The reason I'm doing it this way is it's a piece of a much bigger query. Images loaded to a page with comments under each image. So I'm loading the comments into a column to be parsed for display.

Example:

Image 1        Image 2        Image 3                       etc etc etc
hey                           i think its great!
hey back!                     me too
                              I'm not sure

MORE INFO 2 This data is taken from a MySQL query e.g

select w.img_width, w.img_height, w.prod_pic_url as preview3,
        GROUP_CONCAT(ww.comment,'~', h.user_id,'~', h.name,'~', 
        h.live_prof_pic,'~', h.twovo_url,'~', time_ago(ww.dateadded) SEPARATOR '----') AS comment 
        from tableName where blah=blah

GROUP_CONCAT is the comments section mentioned above

So, to use JSON for data within data, is that possible? If so how?

Example returned data:

"preview3":"http:\/\/myurl.com\/wish_images\/production\/3578.jpg","comment":"test~63~Dave Sanders~http:\/\/graph.facebook.com\/Dave Sanders\/picture?type=large~Dave Sanders~39 minutes ago"},{"item_id":"3559","numComms":"0","numLikes":"0"... etc etc

Answer 1

This isn't suited for a comment, so I'll try to write what I think people are saying with respect to using JSON instead of your strings:

This:

test~63~Dave Sanders~http://graph.facebook.com/998433599/picture?type=large~Dave Sanders~9 minutes ago

Could become this:

[
    {
        'name': 'test',
        'id': 63,
        'name': 'Dave Sanders',
        'url': 'http://graph.facebook.com/998433599/picture?type=large',
        'when': '9 minutes ago'
        // other properties
    },
    {
        // the next one
    },
    {
        // etc.
    }
]

It may look like more work, but you could use some JSON library for php (I'm guessing, since you use the term "explode") to build the JSON on the server. Then your returned content is already in a form for your browser-based client app to use with no additional effort. I find it hard to imagine that this will be more work in the end than what you're trying to do with the string manipulation, and JSON is likely to be less brittle.

Answer 2

As per your updated question...

You can still use JSON for this. I think it might help you to read the JSON specification

Adding to Chris Farmer's answer, JSON can be made of Arrays as well, so you can nest your comments in the response:

var response = [
  {
    'name': 'test',
    'id': 63,
    'name: 'Dave Sanders',
    'url': 'http://graph.facebook.com/998433599/picture?type=large',
    'comments' : [
       'comment1',
       'comment2',
       'comment3',
       ...
    ]
  },
  ...
]

You can then loop through the comments like this:

// loop through the images
for ( var i = 0;  i < response.length; i++ ) {

    var image = response[i];

    // loop through the comments
    for ( var z = 0;  z < response.length; z++ ) { 
        var comment = image.comments[z];
        // insert HTML here.
    }
}

Do you see how much easier and less verbose this is than your current method?

Unfortunately to make this easier for yourself in the long run you will have to re-write your backend code. However, this will teach you the benefit and power of using JSON to transport information.