Форматировать результат после зацикливания объекта

Question

Я зацикливаю объект и ожидаю результат в виде элементов таблицы

var db = {
    "id": "8",
    "user_id": "24",
    "batchno": "367727",
    "ht_number": "jibhbu",
    "ht_taste": "uvyutvc",
    "pp_flavour": "ytv,yurtcrc,urt",
    "pp_fruit_batch": "cuyt,cytc,yt",
    "sl_flavour": "ouihyuigytvytc",
    "sl_appearance": "rtctr"
  },
  pp_ = '<table><tbody>';
for (var i in db) {
  if (db.hasOwnProperty(i)) {
    var js = db[i].split(',');
    for (var x in js) {
      if (i.startsWith('pp_')) {
        pp_ += '<tr><td>' + i + ' ' + x + ' : ' + js[x] + '</td></tr>';
      }
    }
  }
}
pp_ += '</tbody></table>';
document.write(pp_);

Я не могу понять, как разместить элементы с одинаковым индексом на одном уровне (строке) , чтобы у меня было что-то вроде

table, td {
border: 1px solid black;
}

<table>
    <tbody>
        <tr>
            <td> pp_flavour 0 - its value </td>
            <td> pp_fruit_batch 0 - its value </td>
        </tr>
        <tr>
            <td> pp_flavour 1 - its value </td>
            <td> pp_fruit_batch 1 - its value </td>
        </tr>
        <tr>
            <td> pp_flavour 2 - its value </td>
            <td> pp_fruit_batch 2 - its value </td>
        </tr>
    </tbody>
</table>

<br>

<table>
    <tbody>
        <tr>
            <td> sl_favour 0 - its value </td>
            <td> sl_appearance 0 - its value </td>
        </tr>
        <tr>
            <td> sl_favour 1 - its value </td>
            <td> sl_appearance 1 - its value </td>
        </tr>
    </tbody>
</table>

И так далее...

javascript jquery html

0

Jonathan 30 Авг 2017 в 14:08

Answer 1

Вы можете попробовать добавить каждое значение таблицы в 2-D массив , а затем сформировать таблицу из этого 2-D массива.

попробуйте следующее решение

ПРИМЕЧАНИЕ : это также будет работать с различным количеством строк и столбцов.

var db = {
    "id": "8",
    "user_id": "24",
    "batchno": "367727",
    "ht_number": "jibhbu",
    "ht_taste": "uvyutvc",
    "pp_flavour": "ytv,yurtcrc,urt",
    "pp_fruit_batch": "cuyt,cytc,yt",
    "sl_flavour": "ouihyuigytvytc",
    "sl_appearance": "rtctr"
  };
function createTable(myKey){
var  rows = [];
for (var dbKey in db) {
  if (db.hasOwnProperty(dbKey)) {
    if (dbKey.startsWith(myKey)) {
      var values = db[dbKey].split(',');
      for (var val in values) {
        if (!rows[val])
          rows[val] = [];
        rows[val].push('<td>' + dbKey + ' ' + val + ' : ' + values[val] + '</td>');
      }
    }
  }
}

var myTable = '<table><tbody>';
for (var i = 0; i < rows.length; i++) {
  myTable += "<tr>" + rows[i].join("") + "</tr>";
}
myTable += '</tbody></table>';
return myTable;
}
var ht_table = createTable("ht_");
document.getElementById("myTable").innerHTML +="<br/>"+ ht_table;

var pp_table = createTable("pp_");
document.getElementById("myTable").innerHTML +="<br/>"+ pp_table;

var sl_table = createTable("sl_");
document.getElementById("myTable").innerHTML += "<br/>"+ sl_table;

table, td {
  border-style: solid;
}

<p id="myTable">

</p>

1

Nemani 30 Авг 2017 в 12:29

Answer 2

Создайте цикл, увеличивая счетчик, который будет определять, следует ли выводить значение разделения ключа.

Если в индексе счетчика больше не найдено значений, прекратите цикл.

var db = {
    "id": "8",
    "user_id": "24",
    "batchno": "367727",
    "ht_number": "jibhbu",
    "ht_taste": "uvyutvc",
    "pp_flavour": "ytv,yurtcrc,urt",
    "pp_fruit_batch": "cuyt,cytc,yt",
    "sl_flavour": "ouihyuigytvytc",
    "sl_appearance": "rtctr"
  },
  s = '';

['pp_', 'ht_', 'sl_'].forEach(function(type) {
  var i,
      found = true;
  
  s += '<table>';
  
  for(i = 0 ; found ; i++) {
    s += '<tr>';
    found = false;
    Object.keys(db).forEach(function(key) {
      var js = db[key].split(',');
    
      if(js[i] && key.startsWith(type)) {
        found = true;
        s += '<td>' + key + ' ' + i + ' : ' + js[i] + '</td>';
      }
    });
    s += '</tr>';
  }
  s += '</table>';
});

document.write(s);

td {
  border-bottom: 1px solid #bbb;
  border-right: 1px solid #ddd;
  padding: 0.5em;
}

table {
  border: 1px solid black;
  margin-bottom: 1em;
  border-spacing: 0;
}

1

Rick Hitchcock 30 Авг 2017 в 13:19

Answer 3

Вы можете попробовать проиндексировать базу данных следующим образом:

var db = {
  "id": "8",
  "user_id": "24",
  "batchno": "367727",
  "ht_number": "jibhbu",
  "ht_taste": "uvyutvc",
  "pp_flavour": "ytv,yurtcrc,urt",
  "pp_fruit_batch": "cuyt,cytc,yt",
  "sl_flavour": "ouihyuigytvytc",
  "sl_appearance": "rtctr"
};

var prefixes = ["pp", "ht", "sl"];
var prefixedDb = {};
var result = "";

for (var i in db) {
  if (db.hasOwnProperty(i)) {
    var parts = i.split("_");
    var prefix = parts[0];

    if (prefixes.indexOf(prefix) === -1) continue;
    if (prefixedDb[prefix] === undefined) {
      prefixedDb[prefix] = {};
    }

    prefixedDb[prefix][parts.slice(1).join("_")] = db[i];
  }
}

for (var k in prefixedDb) {
  if (prefixedDb.hasOwnProperty(k)) {
    var db = prefixedDb[k];
    var dbIndexed = {};

    for (var i in db) {
      if (db.hasOwnProperty(i)) {
        var vals = db[i].split(',');

        vals.forEach(function(val, j) {
          if (dbIndexed[j] === undefined) {
            dbIndexed[j] = {};
          }

          dbIndexed[j][i] = val;
        });
      }
    }

    result += "<table><tbody>";

    for (var i in dbIndexed) {
      if (dbIndexed.hasOwnProperty(i)) {
        result += "<tr>";

        var indexVals = dbIndexed[i];
        for (var j in indexVals) {
          if (indexVals.hasOwnProperty(j)) {
            result += "<td>" + j + " " + i + " - " + indexVals[j] + "</td>";
          }
        }

        result += "</tr>";
      }
    }

    result += "</tbody></table>";
  }
}

document.write(result);

table, td {
  border: 1px solid black;
}

Обратите внимание, что этот код может быть не самым оптимизированным кодом для этой задачи.

3

Greg Depoire-Ferrer 30 Авг 2017 в 12:25

Answer 4

Вы можете извлечь нужные значения из объекта, разделить их и взять максимальную длину для итерации строк таблицы. Затем соберите таблицу, повторяя значения.

var db = { pp_flavour: "ytv,yurtcrc,urt", pp_fruit_batch: "cuyt,cytc,yt,42" },
    values = Object.keys(db).filter(k => k.startsWith('pp_')).map(k => (db[k] || '').split(',')),
    length = values.reduce((r, a) => Math.max(r, a.length), 0),
    table = document.createElement('table'),
    tr,
    i;

for (i = 0; i < length; i++) {
    tr = document.createElement('tr');
    table.appendChild(tr);
    values.forEach(function (a) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(i in a ? a[i] : ''));
        tr.appendChild(td);
    });
}

document.body.appendChild(table);

1

Nina Scholz 30 Авг 2017 в 12:08

Форматировать результат после зацикливания объекта

4 ответа

Похожие вопросы

Новые вопросы

javascript