Функция Javascript сортирует по индексу, а не по имени файлов
У меня есть эта база данных и функция сортировки. Сортировка выполняется по таблице html, которая взяла данные из файла database.json. Проблема в том, что при сортировке они сортируются по их индексу, а не по имени местоположения, как было предложено. Например, в этом случае будет заменен только первый набор данных последним. (1,2,3) -> (3,2,1)
Пожалуйста помоги...
БАЗА ДАННЫХ
[
{
"title": "Great big event",
"location": "Grand plaza"
},
{
"title": "Cross cultural food tasting",
"location": "Melius Restaurant",
"date": "18 December 2018",
"time": "8 PM",
"description" : "Food tasting event where you can enjoy a mix of 10 famous cuisines"
},
{
"title": "Small dining event",
"location": "Cafe Il diroma",
"date": "10 February 2019",
"time": "6 AM",
"description": "The perfect place for casual dinners"
}
]
ФУНКЦИЯ СОРТИРОВКИ
location.sort(function(a, b){
if (a.location < b.location) { return -1; }
if (a.location > b.location) { return 1; }
return 0;
})
</script>
<body>
<div class = "show-inline-block">
<button onclick = "location.sort(a,b)" class = "button button2">Sort table</button>
</div>
<div id = "result"></div>
</body>
ОБНОВИТЬ: Сортировка выполняется для таблицы HTML, созданной с данными из database.json.
<div class = "table-responsive">
<table class = "table table-striped" id = "myTable" >
<thead>
<tr>
% for k in displaykeys:
<th scope = "col" style = "padding-left:30px">{{k.title()}}</th>
% end # Usual python indention to structure code does not work in .tpl files - "end" is used instead to end a block
</tr>
</thead>
<tbody>
% for i, d in enumerate(displaydata): # displaydata is expected to be a list of dictionaries
% link_url = "/events/" + str(i + 1) # relative url to detailed view
<tr>
% for k in displaykeys: # Go thru the keys in the same order as for the headline row
<td style = "padding-left:30px"><a href = "{{link_url}}" alt = "See details">{{displaydata[i][k]}}</a></td>
% end # Usual python indention to structure code does not work in .tpl files - "end" is used instead to end a block
</tr>
% end
</tbody>
</table>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш код сортировки не проблема. Проблема в структуре вашего общего кода.
location - это глобальное название, а не имя, которое вам следует переопределять. Кроме того, в вашем HTML onclick вы передаете a и b, которые не имеют значений и не определены.
Вам необходимо настроить функцию обратного вызова для события click вашей кнопки, и в этой функции вы можете выполнить сортировку.
См. Встроенные комментарии ниже:
// Don't use global names as identifiers. "location" is a global.
let loc = [
{
"title": "Great big event",
"location": "Grand plaza"
},
{
"title": "Cross cultural food tasting",
"location": "Melius Restaurant",
"date": "18 December 2018",
"time": "8 PM",
"description" : "Food tasting event where you can enjoy a mix of 10 famous cuisines"
},
{
"title": "Small dining event",
"location": "Cafe Il diroma",
"date": "10 February 2019",
"time": "6 AM",
"description": "The perfect place for casual dinners"
}
];
// Get your DOM references
let btn = document.querySelector("button");
// Set up event handling in JavaScript, not HTML
btn.addEventListener("click", sort);
// Set up a function that can be called when the button is clicked
function sort(){
// Do your sort in that function
loc.sort(function(a, b){
if (a.location < b.location) { return -1; }
if (a.location > b.location) { return 1; }
return 0;
});
// Show results
console.info(loc);
}<div class = "show-inline-block">
<button class = "button button2">Sort table</button>
</div>Привет! Не могли бы вы еще раз взглянуть на код? Я обновил его с помощью табличной части HTML.
@manubmxnsb Вы бы не сортируете HTML. Вы должны отсортировать данные (как показывает мой ответ), а затем пересобрать HTML в соответствии с этим.
Да, но, используя это решение, каждый раз, когда я помещаю что-то новое в хранилище данных, мне придется обновлять 'let loc', чего от меня не ждут ... Не могли бы вы помочь мне изменить что-то в моем решении, чтобы оно правильная сортировка? Сортировка работает, она просто не сравнивает то, что нужно.
А как еще можно получить что-то новое в хранилище данных? loc нужно будет обновить, но вам не нужно делать это вручную, вы должны взять ввод из пользовательского интерфейса и обновить loc с этим вводом.
Я не уверен, что правильно слежу, вы говорите, что loc обновляет себя любым новым daa, вводимым пользователем?
да. когда пользователь вводит данные, эти данные добавляются к loc, и когда нажимается кнопка сортировки, loc сортируется, а затем таблица повторно визуализируется для отображения вновь отсортированных данных массива. Это называется разделением ответственности. Просто позаботьтесь о сохранении целостности данных, а таблица является не чем иным, как отражением данных.
Дело в том, что мне дали этот код, который получает элементы и помещает их в таблицу HTML, прежде чем дать мне возможность изменить их для сортировки. Я не могу изменить порядок, это для школьного проекта. Так будет ли этот метод актуален в данном случае? - Обновлено: у меня могут быть белые пятна, так как я новичок в javascript atm ... Кроме того, все результаты должны быть изменены и показаны в таблице
Ну, вы не показали код, который принимает элементы и помещает их в таблицу, поэтому сложно сказать. К сожалению, многие учителя не понимают передовых практик и методологий и могут не осознавать, что преподают плохие методы.
Там я обновил пост. К сожалению, ты совершенно прав в отношении учителей! После 3 часов поиска в Интернете и этого выступления я действительно вижу, насколько безобиден их код. Однако сделать это эффективным означало бы переписать весь их код, чего, к сожалению, они от меня не хотят: /
Я не вижу в вашем коде ничего, что позволяло бы пользователю вводить новые данные.
Однако у меня есть еще один вариант кода. Он длиннее, хотя работает с таблицей HTML, но неправильно их сортирует. Не могли бы вы проверить эту ссылку? stackoverflow.com/questions/53821948/… Я разместил этот вопрос за 2-3 часа до этого
Эта часть находится в другом файле под названием «typein.py». Весь пакет представляет собой простой, но неэффективный сайт (наполовину сделанный учителями) с использованием Bottle Two на Python с Javascript и HTML.
Я думаю, что в этом решении проблема заключается в следующем: x = rows [i] .getElementsByTagName ("TD") [n]; y = строки [я + 1] .getElementsByTagName ("TD") [n];
Я также пробовал использовать этот тип: w3schools.com/howto/… Все та же проблема. Он каким-то образом сортируется по их порядку в базе данных, а не по имени элемента.