Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменить порядок свойств объектов в большом массиве (https://javascript.ru/forum/misc/60614-izmenit-poryadok-svojjstv-obektov-v-bolshom-massive.html)

Keramet 10.01.2016 22:32

Изменить порядок свойств объектов в большом массиве
 
Есть макет таблицы на странице:
<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().

рони 10.01.2016 22:57

Цитата:

Сообщение от Keramet
Есть ли какой-то способ определить вывод полей объекта в нужном порядке

нет

Keramet 10.01.2016 23:02

рони,
спасибо. Краткость - сестра таланта )) Ну а как бы вы решали эту задачу (если не секрет). Хотя бы в общих чертах,если можно

Lemme 10.01.2016 23:07

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

Keramet 10.01.2016 23:23

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

и потом в цикле вывожу. Параллельно кое-какое форматирование сделал.

рони 10.01.2016 23:26

Создание таблицы из данных
 
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>

Keramet 10.01.2016 23:30

Lemme,
а у меня в консоле не видно порядка - там в раскрывающимся списке все свойства по алфавиту (. Если б алертом вывести, тогда по идее будет виден порядок

Keramet 10.01.2016 23:33

рони,
:thanks:

Lemme 10.01.2016 23:33

Цитата:

Если б алертом вывести,
поправил

Цитата:

я сделал по рабоче-крестьянски:
Ох уж этот хаос, а если пару месяцев в код смотреть не будешь, потом разберешься?=)

Keramet 10.01.2016 23:54

рони,
44    ordersList.forEach(function(c, b) {
45       var d = tbody.insertRow(b);

а если не сложно, поясните зачем тут b: insertRow(b)?
ведь insertRow() можно и без индекса новой строки вызывать? ведь мы нигде не привязываемся в этому индексу?


Часовой пояс GMT +3, время: 20:27.