Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2016, 22:32
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2016, 22:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Keramet
Есть ли какой-то способ определить вывод полей объекта в нужном порядке
нет
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2016, 23:02
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

рони,
спасибо. Краткость - сестра таланта )) Ну а как бы вы решали эту задачу (если не секрет). Хотя бы в общих чертах,если можно
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2016, 23:07
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 10.01.2016, 23:23
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 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.
Ответить с цитированием
  #6 (permalink)  
Старый 10.01.2016, 23:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Создание таблицы из данных
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
Ответить с цитированием
  #7 (permalink)  
Старый 10.01.2016, 23:30
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

Lemme,
а у меня в консоле не видно порядка - там в раскрывающимся списке все свойства по алфавиту (. Если б алертом вывести, тогда по идее будет виден порядок
Ответить с цитированием
  #8 (permalink)  
Старый 10.01.2016, 23:33
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

рони,
Ответить с цитированием
  #9 (permalink)  
Старый 10.01.2016, 23:33
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

Цитата:
я сделал по рабоче-крестьянски:
Ох уж этот хаос, а если пару месяцев в код смотреть не будешь, потом разберешься?=)
Ответить с цитированием
  #10 (permalink)  
Старый 10.01.2016, 23:54
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов свойств объектов из массива или объекта с параметрами Sanu0074 jQuery 4 22.05.2015 10:18
Поиск в массиве объектов desperado Общие вопросы Javascript 1 26.02.2015 12:34
Поиск объектов в массиве Lynatik Общие вопросы Javascript 24 22.06.2013 12:43
порядок сортировки в массиве изменяется. DarkGuy AJAX и COMET 2 20.05.2013 15:50
Изменить порядок элементов sunlord jQuery 2 04.02.2012 16:38