CODEWITHSUNDEEP
javascriptjqueryhtmljson
learning1216
learning1216

Reputation: 45

Appending json file to html with condition

I am appending a dynamic json file to html.I would like to change the color of openticket row .td elements if value of .openticket is bigger then x number.

My code looks like:

<table id="userdata" border="2">
   <thead>
      <th>Department</th>
      <th>OpenTickets</th>
   </thead>
   <tbody></tbody>
</table>

JS

function repopulateTable(data) {
    var parsedData = JSON.parse(data);
    console.log(parsedData);
    var dashboard = [];
    dashboard.push(JSON.parse(data));
    dashboard.forEach(function (value, index) {;
        var table1Rows = "";
        for (var key in value) {
            if (value.hasOwnProperty(key)) {
                if (key === 'Item1') {
                    value[key].forEach(function (val) {                                
                        var tbl1Row = "<tr>" + "<td>" + val.Title + "</td>" + "<td>" + val.Ticketnumber + "</td>" + "</tr>"
                        table1Rows += tbl1Row;
                    })
                }
            }
        }
        $("#userdata tbody").html(table1Rows);
    });
}

I have made css

.color{
   color:red;
}

and tried captured the val like and add attribute:

var capture = $(val.Ticketnumber).val();
if (capture.val)>3{
$("td:second").addClass("color");
}

without success.

Upvotes: 1

Views: 103

Answers (1)

Venkateswaran R
Venkateswaran R

Reputation: 478

kindly have a look.

for (var key in value) {
            if (value.hasOwnProperty(key)) {
                if (key === 'Item1') {
                    value[key].forEach(function (val) {                                
                        var tbl1Row = "<tr " + (parseInt(val.Ticketnumber)>3?" class='color'":"") + ">" + "<td>" + val.Title + "</td>" + "<td>" + val.Ticketnumber + "</td>" + "</tr>"
                        table1Rows += tbl1Row;
                    })
                }
            }
        }

In the above code, i have append class based on condition ("3?" color":"") + ">")

Upvotes: 1

Related Questions