10.01.2016, 22:32
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
Изменить порядок свойств объектов в большом массиве
Есть макет таблицы на странице:
<table border="1">
<thead>
<tr>
<th>Дата</th>
<th>№ заказа</th>
<th>ID покупателя</th>
<th>Общая сумма</th>
<th>Обычные продажи</th>
<th>Рекомендованные продажи</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Есть массив объектов:
var ordersList = [
{id: 5070992, user_id: 29073781, timestamp: 1435092870, total: 1714, recommended: 0, typical: 1714 },
{id: 5070993, user_id: 33963628, timestamp: 1435092881, total: 10290, recommended: 0, typical: 10290 },
{id: 5070994, user_id: 33963648, timestamp: 1435092882, total: 2427, recommended: 0, typical: 2427 },
{id: 5070996, user_id: 33963559, timestamp: 1435092974, total: 1299, recommended: 0, typical: 1299 },
{id: 5070998, user_id: 33963814, timestamp: 1435093028, total: 2090, recommended: 0, typical: 2090 },
{id: 5071000, user_id: 33963819, timestamp: 1435093041, total: 16440, recommended: 0, typical: 16440 },
{id: 5071001, user_id: 33963837, timestamp: 1435093047, total: 5800, recommended: 0, typical: 5800 },
{id: 5071003, user_id: 33964044, timestamp: 1435093060, total: 5115, recommended: 0, typical: 5115 },
.....
]
массив большой: ordersList.length > 10 000
Необходимо вывести этот массив в имеющуюся таблицу. Проблема в том, что заголовок таблицы не соответствует порядку полей в объектах.
Мой вариант такой:
var tBody = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0],
newTr, newTd,
i, j, N
arrayOfObj; // сюда планирую запихнуть свойства объектов в нужном порядке
for (i = 0, N = ordersList.length; i < N; i++) {
newTr = tBody.appendChild( document.createElement("tr") );
arrayOfObj = someF(ordersList[i]); // тут нужна помощь!
for (j = 1; j <= thCount; j++) {
newTd = newTr.appendChild( document.createElement("td") );
newTd.textContent = arrayOfObj[j];
}
}
Есть ли какой-то способ определить вывод полей объекта в нужном порядке, или надо самому писать функцию (в моём варианте - это функция someF().
Последний раз редактировалось Keramet, 10.01.2016 в 22:38.
|
|
10.01.2016, 22:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Сообщение от Keramet
|
Есть ли какой-то способ определить вывод полей объекта в нужном порядке
|
нет
|
|
10.01.2016, 23:02
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
рони,
спасибо. Краткость - сестра таланта )) Ну а как бы вы решали эту задачу (если не секрет). Хотя бы в общих чертах,если можно
|
|
10.01.2016, 23:07
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
Keramet, что то такое?
var ordersList = [
{id: 5070992, user_id: 29073781, timestamp: 1435092870, total: 1714, recommended: 0, typical: 1714 },
{id: 5070993, user_id: 33963628, timestamp: 1435092881, total: 10290, recommended: 0, typical: 10290 }
];
function changeOrder(ordersList, order) {
var newOrder;
return ordersList.map(function(item) {
newOrder = {};
for(var orderItem of order) {
if (item.hasOwnProperty(orderItem)) {
newOrder[orderItem] = item[orderItem];
}
}
return newOrder;
});
}
var order = ['typical', 'recommended', 'total', 'id', 'total', 'user_id', 'timestamp'],
newOrdersList = changeOrder(ordersList, order);
console.log(newOrdersList[0]);
alert(JSON.stringify(newOrdersList[0]));
p.s не уверен, в том, что не говнокод
Последний раз редактировалось Lemme, 10.01.2016 в 23:32.
|
|
10.01.2016, 23:23
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
Lemme,
Тоже вариант, спс. Только у меня порядок задан не
var order = ['typical', 'recommended', 'total', 'id', 'total', 'user_id', 'timestamp'],
а макетом таблицы:
<table border="1">
<thead>
<tr>
<th>Дата</th>
<th>№ заказа</th>
<th>ID покупателя</th>
<th>Общая сумма</th>
<th>Обычные продажи</th>
<th>Рекомендованные продажи</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
я сделал по рабоче-крестьянски:
function inRightOrder(obj) {
var arr = [], ordDate = new Date (obj.timestamp * 1000);
arr.push( ordDate.toLocaleDateString() );
arr.push(obj.id);
arr.push(obj.user_id);
arr.push(obj.total.toFixed(2) + " grn");
arr.push(obj.typical.toFixed(2) + " grn");
arr.push(obj.recommended.toFixed(2) + " grn");
return arr;
}
и потом в цикле вывожу. Параллельно кое-какое форматирование сделал.
Последний раз редактировалось Keramet, 10.01.2016 в 23:27.
|
|
10.01.2016, 23:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Создание таблицы из данных
Keramet,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Дата</th>
<th>№ заказа</th>
<th>ID покупателя</th>
<th>Общая сумма</th>
<th>Обычные продажи</th>
<th>Рекомендованные продажи</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
window.addEventListener('DOMContentLoaded', function() {
var table = document.querySelector('table'),
tbody = table.querySelector('tbody')
ordersList = [
{id: 5070992, user_id: 29073781, timestamp: 1435092870, total: 1714, recommended: 0, typical: 1714 },
{id: 5070993, user_id: 33963628, timestamp: 1435092881, total: 10290, recommended: 0, typical: 10290 },
{id: 5070994, user_id: 33963648, timestamp: 1435092882, total: 2427, recommended: 0, typical: 2427 },
{id: 5070996, user_id: 33963559, timestamp: 1435092974, total: 1299, recommended: 0, typical: 1299 },
{id: 5070998, user_id: 33963814, timestamp: 1435093028, total: 2090, recommended: 0, typical: 2090 },
{id: 5071000, user_id: 33963819, timestamp: 1435093041, total: 16440, recommended: 0, typical: 16440 },
{id: 5071001, user_id: 33963837, timestamp: 1435093047, total: 5800, recommended: 0, typical: 5800 },
{id: 5071003, user_id: 33964044, timestamp: 1435093060, total: 5115, recommended: 0, typical: 5115 }],
arr = ['timestamp', 'id', 'user_id', 'total', 'typical','recommended'],
fix = function(a) {
return a.toFixed(2) + " grn"
},
obj = {'timestamp' : function(a) {
return new Date(a*1000).toLocaleDateString()
},
'total' : fix,
'typical' : fix,
'recommended' : fix
};
ordersList.forEach(function(c, b) {
var d = tbody.insertRow(b);
arr.forEach(function(a, b) {
d.insertCell(b).innerHTML = obj[a] ? obj[a](c[a]) : c[a]
})
});
});
</script>
</body>
</html>
Последний раз редактировалось рони, 10.01.2016 в 23:32.
Причина: добавлен fix
|
|
10.01.2016, 23:30
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
Lemme,
а у меня в консоле не видно порядка - там в раскрывающимся списке все свойства по алфавиту (. Если б алертом вывести, тогда по идее будет виден порядок
|
|
10.01.2016, 23:33
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
рони,
|
|
10.01.2016, 23:33
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
Цитата:
|
Если б алертом вывести,
|
поправил
Цитата:
|
я сделал по рабоче-крестьянски:
|
Ох уж этот хаос, а если пару месяцев в код смотреть не будешь, потом разберешься?=)
|
|
10.01.2016, 23:54
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
рони,
44 ordersList.forEach(function(c, b) {
45 var d = tbody.insertRow(b);
а если не сложно, поясните зачем тут b: insertRow(b)?
ведь insertRow() можно и без индекса новой строки вызывать? ведь мы нигде не привязываемся в этому индексу?
|
|
|
|