|
Изменить порядок свойств объектов в большом массиве
Есть макет таблицы на странице:
<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, что то такое?
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 не уверен, в том, что не говнокод :-E |
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,
<!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> |
Lemme,
а у меня в консоле не видно порядка - там в раскрывающимся списке все свойства по алфавиту (. Если б алертом вывести, тогда по идее будет виден порядок |
рони,
:thanks: |
Цитата:
Цитата:
|
рони,
44 ordersList.forEach(function(c, b) { 45 var d = tbody.insertRow(b); а если не сложно, поясните зачем тут b: insertRow(b)? ведь insertRow() можно и без индекса новой строки вызывать? ведь мы нигде не привязываемся в этому индексу? |
Часовой пояс GMT +3, время: 16:18. |
|