How to parse strings and change to td element contents?

Question

I am looking for a JS condition to get 100% or 0% based on following variable string.

"0x200d12e,1446184575000,0"
"0x200d12f,1446184575000,0"
"0x200d130,1446184575000,0"
"0x200d132,1446184575000,0"

if "0x200d12e,1446184575000,0" state "0" means 1 is 100% so rest of TD are o%

<table> 
    <tr> 
      <td> <span> 100% </span> </td>
      <td> <span> 0% </span> </td>
      <td><span> 0% </span> </td>
      <td> <span> 0% </span></td>      
    </tr>

</table>

Answer 1

Well first you parse the string: Then you change the content.

 var myString = "0x200d12e,1446184575000,0"; if(myString.match("0x200d12e")) document.querySelector('.hello').innerHTML = "HELLO WORLD"; 

 <div class="hello"></div> 

Answer 2

    <script type = "text/javascript" src = "jquery-1.8.3.js" > </script>

    <div id="tables"/>

    <script>

        var mstdta='{"queries":[{"sample_size":32,"results":[{"name":"NAME","group_by":[{"name":"tag","tags":["model_A"],"group":{"model_A":"000000000"}},{"name":"type","type":"number"}],"values":[[1445998669000,0]]},{"name":"NAME","group_by":[{"name":"tag","tags":["smodel_A"],"group":{"model_A":"111111111"}},{"name":"type","type":"number"}],"values":[[1445998669000,1],[1446000472000,1]]},{"name":"NAME","group_by":[{"name":"tag","tags":["model_A"],"group":{"model_A":"222222222"}},{"name":"type","type":"number"}],"values":[[1446000472000,0]]},{"name":"NAME","group_by":[{"name":"tag","tags":["model_A"],"group":{"model_A":"3333333333"}},{"name":"type","type":"number"}],"values":[[1445998669000,0],[1446000472000,0]]}]}]}';

 var tableStrRef="<table><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr></table>";

    $(document).ready(function() {
    var myData = JSON.parse(mstdta);
    var resultArr = new Array();
    $.each(myData, function (key, value) {
    if (key = "queries") {
    var resultObj = value;



    for (var key in resultObj) {
    if (resultObj.hasOwnProperty(key)) {
    if (resultObj[key].hasOwnProperty("results")) {
    for (var i in resultObj[key].results) {
        var arrObj = resultObj[key].results[i];
        var x, y1, y2;
        if (arrObj.hasOwnProperty("group_by")) {
            var x = arrObj.group_by[0].group.model_A;
        }
        if (arrObj.hasOwnProperty("values")) {
            for(var k in arrObj.values){
                 y1 = arrObj.values[k][0];
                 y2 = arrObj.values[k][1];
                 var tempArr1 = [x, y1, y2];
                 resultArr.push(tempArr1);
            }
        }
    }
    }
    }
    }
    }

    });

    var tblArr=new Array();
    $.each(resultArr, function (key, value) {

        tableStr=tableStrRef;
        var temp=value[2];
        if(temp=="0"){
            tableStr=tableStr.replace("1","100%");
            tableStr=tableStr.replace("2","0%");
            tableStr=tableStr.replace("3","0%");
            tableStr=tableStr.replace("4","0%");
        }
        else if(temp=="1"){
            tableStr=tableStr.replace("1","0%");
            tableStr=tableStr.replace("2","100%");
            tableStr=tableStr.replace("3","0%");
            tableStr=tableStr.replace("4","0%");
        }
        else if(temp=="2"){
            tableStr=tableStr.replace("1","0%");
            tableStr=tableStr.replace("2","0%");
            tableStr=tableStr.replace("3","100%");
            tableStr=tableStr.replace("4","0%");
        }
        else if(temp=="3"){
            tableStr=tableStr.replace("1","0%");
            tableStr=tableStr.replace("2","0%");
            tableStr=tableStr.replace("3","0%");
            tableStr=tableStr.replace("4","100%");
        }

        tblArr.push(tableStr);
    });

    var finalStr="";
    $.each(tblArr, function (key, value) {
        finalStr=finalStr+value;
    });

    $('#tables').append(finalStr);

    }); 
    </script>