使用：contains在dom中查找json，替换每个元素（单独）

Question

I have some server-side generated json string in a table, so I don't know what content might come up in it. I don't even know if there might be a JSON string or not. The table looks like this:

<table>
    <tr>
        <th> Some Header</th>
        <th> Some Header</th>
    </tr>
    <tr>
        <td> Something </td>
        <td>    
            {"Something":true,"Something":false,"Somthing":true,"Something":false,"Something":true,"Something else":false,"Something":false}
        </td>
    </tr>
    <tr>
        <td>Something</td>
        <td>
            {"Something":true,"Something":false,"Something":true,"Something":false,"Something":true,"Something else":false,"Something":false}
        </td>
    </tr>
</table>

I need to format each one of those json's strings into a formated table. I tried using :contains(":true"); but the returning element looks like this:

{"Something":true,"Something":false,"Something":true,"Something":false,"Something":true,"Something else":false,"Something":false}{"Something":true,"Something":false,"Something":true,"Something":false,"Something":true,"Something else":false,"Something":false}

It returns the json's as expected, but I couldn't figure out a way to reference the containing element back to replace it with a formated table. I did a different function for another table where every json string had a defined sibling, so I referenced that. Here's that function:

var jsonTable = function(s){
    var search = "th:contains("+s+")";
    var container = $(search).siblings();
    var string = container.text();
    var obj = jQuery.parseJSON(string);
    container.text(" ");
    var nospace = s.replace(/\s+/g, '');
    container.append("<table class='mini-table' id="+nospace+"></table>");
    jQuery.each(obj, function(text, val){
        $("#"+nospace).append("<tr><td class='large'>"+text+"</td><td class="+val+"></td></tr>");
    });
    return true;
};

So, my question is:

How can I target a specific element found using :contains when it returns several elements? Any help or better way to do this is completely welcome.

Ps: Sorry if my english sucks, it isn't my native language.

Answer 1

You could do something like this. Code loops over each cell, checks if first character is { or [ and if it is, assumes contents are json. Could also check last character also and use a try/catch block as well to avoid JSON.parse errors being thrown

$('td').each(function(){
    var txt=$.trim($(this).text());
    var reg=/\{|\[/;
    if(reg.test(txt.charAt(0)) ){
       /* text is probably json, should check last character also*/\

       /* would wrap this in try/catch for safety and additional validation that it is JSON*/
       var obj=JSON.parse( txt);

        /* "this" is td with json in it*/
        $(this).append('<span>This is json</span>')
    }  

})

DEMO