JS перебор массива, вывод в HTML

210
03 апреля 2018, 01:29

Из БД получаю 5 массивов в виде:

  1. Корм, Поводок.
  2. Кг. Шт. и т.п.

Мне надо перебрать все массивы и подставить в HTML.

На PHP это реализуется за минуту, с JS затупил.

Собираю массивы, на выходе получаю:

 {0: ["Корм", "Поводок"], 1: ["Шт.", "Кг."], 2: ["1", "12"], 3: ["23", "111"], 4: ["23.00", "1332.00"]}

А мне нужно, разделить все массивы, чтобы получился первый массив

 {0: ["Корм"], 1: ["Шт."], 2: ["1"], 3: ["23"], 4: ["23.00"]}  

второй массив уже Поводок и т.п., чтобы можно было в HTML вставить.

var moneyName = jQuery.parseJSON(result.moneyName); 
var moneyType = jQuery.parseJSON(result.moneyType); 
var moneyCost = jQuery.parseJSON(result.moneyCost); 
var moneyAmount = jQuery.parseJSON(result.moneyAmount); 
var moneySum = jQuery.parseJSON(result.moneySum); 
 
//Очищаем форму 
$('#set__money').html(''); 
 
//Собираю единый массив 
var dataRow = [moneyName, moneyType, moneyCost, moneyAmount, moneySum]; 
var obj = {}; 
$(dataRow).each(function(e, i) { 
  obj[e] = i; 
});

Answer 1

Вопрос решен ))) может кому - то пригодится. На красоту и элегантность не притендую.

//Получаем массивы из БД 
var moneyName = jQuery.parseJSON(result.moneyName); 
var moneyType = jQuery.parseJSON(result.moneyType); 
var moneyCost = jQuery.parseJSON(result.moneyCost); 
var moneyAmount = jQuery.parseJSON(result.moneyAmount); 
var moneySum = jQuery.parseJSON(result.moneySum); 
 
//Собираем все массивы в один 
var dataRow = [moneyName, moneyType, moneyCost, moneyAmount, moneySum]; 
 
var i = 0; 
var obj = []; 
//Проходим циклом по собранному массиву 
for (var el, i = 0; i < dataRow.length; i++) { 
  el = dataRow[i]; 
  //Перебираем массив и записываем в obj 
  $(el).each(function(e, i) { 
    obj[e] = i; 
    //Получаем новый массив obj[0] с первыми элементами 
    console.log(obj[0]); 
  }); 
} 
//obj[1] - следующий массив и т.д.

Answer 2

const { wire,bind } = hyperHTML 
// -- 
window.addEventListener('load',() => { 
  let matrix = [["Корм","Поводок"],["Шт.","Кг."],["1","12"],["23","111"],["23.00","1332.00"]] 
 
  let matrix2 = ref(matrix) 
 
  let table = genHTMLTableElement(matrix2) 
  table.classList.add('qwa') 
 
  let style = genStyle() 
 
  let body = bind(document.body) `${style}${table}` 
}) 
 
function genHTMLTableElement(_matrix){ 
  let Td = (_str) => wire() `<td>${_str}</td>` 
  let Tr = (_arr) => wire() `<tr>${_arr}</tr>` 
  let Table = (_arr) => wire() `<table>${_arr}</table>` 
  let table = null 
  let tr = [] 
  for (let arr of _matrix) { 
    let arrTd = [] 
    for (let _str of arr) { 
      arrTd.push(Td(_str)) 
    } 
    tr.push(Tr(arrTd)) 
  } 
  table = Table(tr) 
  return table 
} 
 
function ref(_matrix){ 
  let matrix2 = Array.from(Array(_matrix[0].length),() => []) 
  for (let _arr of _matrix) { 
    for (var _i = 0; _i < _arr.length; _i++) { 
      matrix2[_i].push(_arr[_i]) 
    } 
  } 
  return matrix2 
} 
 
function genStyle(){ 
  return wire()` 
  <style> 
    .qwa { border:solid 1px; } 
    .qwa td { border-bottom:solid 1px; } 
    .qwa tr:hover { background-color: #d7f7f7; } 
  </style>` 
}
<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>

READ ALSO
Как отправить get запрос ajax?

Как отправить get запрос ajax?

Нужно отправить get запрос на url:

182
Как перенести на новую строку в JS?

Как перенести на новую строку в JS?

Не как не могу сделать перенос строки\r\n <br/> все пробовали

274
Jquery удаление атрибута у класса при ширине

Jquery удаление атрибута у класса при ширине

У меня возникает проблема отключения collapse на кнопкахПри разрешении <=767px они отключаются удалением атрибута посредством JS, а условие того...

194
Адаптивное меню?

Адаптивное меню?

Подскажите пожалуйста, нужно чтобы по клику на элемент меню, открывалось sub-menuВложенность может быть и в 4 уровня

184