İsmail Hakkı Şen İsmail Hakkı Şen - 5 months ago 7
jQuery Question

comparing two different array types in javascript or jquery

I have two different array types. One of them string array another object array;

stringArray = ["P1", "P2", "P3"];
objectArray = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}];


I want to put object array to a table. String array elements must be table headers.

If object array has
P == "P1"
put 5 to cell. Else put empty cell to row.

I tried this but this put multiple empty cells.

This is my code "tKeys" = stringArray, "Ciktilar" = objectArray

var baslikEklendiMi = false;
var satirEkle = function(CalismaTipi, Ciktilar, tKeys)
{
var satir = '<td>' + CalismaTipi + '</td>';
$.each(tKeys, function (i, val) {
if (baslikEklendiMi == false) {
$("#tblBaslik").append("<th>" + val+ "</th>");
}

$.each(Ciktilar, function (j, obj) {
if (val == obj.P) {
satir += '<td><b>' + obj.PO+ '</b></td>';
}
else {
satir += '<td></td>';
}
});
});

baslikEklendiMi = true;
$("#tblListe").append('<tr>' + satir + '</tr>');
}

Answer

To get something like:

|--|--|--|--|
|ct|P1|P2|P3|
|--|--|--|--|
|??|5 |  |10|
|--|--|--|--|

There are five changes that need to be made to your code:

1) Line 7 (below): Instantiate emptyCell, assign false;

2) Line 9: Add $("#tblBaslik").append("<th>ct</th>") to account for CalismaTipi column,

3) Line 25-27: Move satir += '<td></td>' to outside the Ciktilar loop.

4) Line 22: Assign true to emptyCell.

5) Line 18-19: Reset emptyCell and exit the Ciktilar loop.

var stringArray  = ["P1", "P2", "P3"];
var objectArray  = [{ P: "P1", PO: 5}, { P: "P3", PO: 10}];

var baslikEklendiMi = false;
var satirEkle = function(CalismaTipi, Ciktilar, tKeys)
{
    var emptyCell = false;                                // Line 7
    var satir = '<td>' + CalismaTipi + '</td>';
    $("#tblBaslik").append("<th>ct</th>");                // Line 9
    $.each(tKeys, function (i, val) {
        if (baslikEklendiMi === false) {
            $("#tblBaslik").append("<th>" + val+ "</th>");
        }

        $.each(Ciktilar, function (j, obj) {
            if (val == obj.P) {
                satir += '<td><b>' + obj.PO+ '</b></td>';
                emptyCell = false;                         // Line 18
                return false;
            }
            else {
              emptyCell = true;                            // Line 22
            }
        });
        if (emptyCell) {                                   // Line 24
            satir += '<td></td>';
        }
    });

    baslikEklendiMi = true;
    $("#tblListe").append('<tr>' + satir + '</tr>');
};
satirEkle('??', objectArray, stringArray);

The reason you need to move satir += '<td></td>'; outside the Ciktilar loop is because the stringArray list does not correspond directly to the objectArray list. You want to check ALL the stringArray elements to find a match, and if no match after ALL the stringArray elements are checked THEN write an empty cell. So, rather than write to satir in the loop, set an emptyCell flag, and check that flag after the loop.

JSBin example.

Comments