比较javascript或jquery中的两种不同的数组类型 [英] 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.

如果对象数组具有P == "P1"，则将5放入单元格.否则将空单元格放入行中.

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.

这是我的代码"tKeys" = stringArray，"Ciktilar" = objectArray

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>');
}

推荐答案

要获取类似内容:

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

您需要对代码进行五项更改:

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

1)第7行(下方):实例化emptyCell，分配false;

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

2)第9行:在CalismaTipi列中添加$("#tblBaslik").append("<th>ct</th>")，

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

3)第25-27行:将satir += '<td></td>'移至Ciktilar循环之外.

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

4)第22行:将true分配给emptyCell.

4) Line 22: Assign true to emptyCell.

5)第18-19行:重置emptyCell并退出Ciktilar循环.

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);

之所以需要将satir += '<td></td>';移到Ciktilar循环之外是因为stringArray列表不直接与objectArray列表相对应.您要检查所有stringArray元素以找到匹配项，如果在检查所有stringArray元素后都没有匹配项，则写一个空单元格.因此，不要在循环中写入satir，而是要设置emptyCell标志，并在循环后检查该标志.

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示例.

这篇关于比较javascript或jquery中的两种不同的数组类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！