#javascript
#javascript
Вопрос:
В этом я пытаюсь отсортировать данные по partNo , и они отлично отсортированы с этим, но моя проблема в том, что первый столбец таблицы не сортируется с остальными столбцами. sr No должен быть отсортирован со всеми остальными столбцами
вот sr No ключ, который не сортируется с другими столбцами
let productDetails = {
"10": [{
id: "1",
partNo: "100",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
}],
"20": [{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
}]
,
"30": [{
id: "4",
partNo: "25",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
}],
"40": [{
id: "3",
partNo: "45",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}]
};
/**
* This function displays the data in the table
*/
function displayData() {
objectArray = Object.values(productDetails);
display(objectArray);
}
function display(productStore) {
messageTable(" ");
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><tr><th>sr No</th><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th></tr>";
for (var key in productDetails) {
for (var weight in productDetails[key]) {
table = "<tr><td>" key "</td>";
table = "<td>" productDetails[key][weight].id "</td>";
table = "<td>" productDetails[key][weight].partNo "</td>";
table = "<td>" productDetails[key][weight].productName "</td>";
table = "<td>" productDetails[key][weight].size "</td>";
table = "<td>" productDetails[key][weight].color "</td>";
table = "<td>" productDetails[key][weight].description "</td>";
}
} messageTable(table);
}
/**
* function to sort an array by part No
*/
function sortByPartNo() {
let arr = [];
item = Object.keys(productDetails)
console.log(item)
item.forEach(function (index) {
productDetails[index].forEach(function (indexA) {
arr.push(indexA);
});
})
arr.sort(function (first, second) {
return parseFloat(first.partNo) - parseFloat(second.partNo);
});
console.log(arr)
printArray(arr, item)
}
/**
* function to print array in the table
*/
function printArray(arr, item) {
messageTable(" ");
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><tr><th>sr No</th><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th></tr>";
for (let key in arr) {
table = "<tr><td>" item[key] "</td>";
table = "<td>" arr[key].id "</td>";
table = "<td>" arr[key].partNo "</td>";
table = "<td>" arr[key].productName "</td>";
table = "<td>" arr[key].size "</td>";
table = "<td>" arr[key].color "</td>";
table = "<td>" arr[key].description "</td>";
} messageTable(table);
}
/**
* function is to print the table
*/
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/**
* this function is to print the message
*/
function message(message) {
document.getElementById("demo").innerHTML = message;
}
<!DOCTYPE html>
<html>
<head>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="displayData()">
<h2>Product Details:</h2>
<form action="">
<input type="button" value="sortByPartNo" onclick="sortByPartNo();">amp;nbsp;
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html> Комментарии:
1. @pwilcox как вы знаете, предыдущий вопрос закрыт из-за того, что некоторые люди не внимательно прочитали вопрос, если вы знаете ответ, пожалуйста, дайте мне знать
2.
productDetailsявляется литералом объекта JavaScript, это не JSON. Что такое JSON в любом случае3. да, это моя ошибка, извините, я исправлю это @RandyCasburn
4. Как вы думаете, что именно даст наличие отдельных функций сортировки (одна для
Object.values(productDetails);и одна дляObject.keys(productDetails);)? должно быть ясно, что если вы сортируете их отдельно, они будут, ну, сортироваться отдельно (по-разному в разное время). Ваша структура данных должна измениться так, чтобы каждая запись содержалаsr No— тогда ключи не имеют значения
Ответ №1:
Для этого есть несколько способов, но самым простым было бы просто создать новые объекты из исходного, который содержит как ключи, так и значения.
т.е. включите это:
{
"10": [{
"partNo": "100",
"size": "30",
// etc
}],
// ...
}
в это
[
{
"key": "10",
"partNo": "100",
"size": "30",
// etc
},
// ...
]
или, альтернативно, что-то подобное тоже работает. Аналогичный подход используется в конкретном примере кода ниже.
[
{
"key": "10",
"value": {
"partNo": "100",
"size": "30",
// etc
},
},
// ...
]
По сути, нам просто нужно объединить всю связанную информацию вместе, прежде чем мы выполним sort() . После сортировки мы можем передать собранные данные как есть вашим функциям отображения или разделить их обратно на два списка, как вы предпочитаете.
Практический упрощенный пример:
const data = {
1: {
color: 'blue',
size: 10,
},
2: {
color: 'green',
size: 50,
},
3: {
color: 'yellow',
size: 5,
},
}
// Object.entries() will reshape the data in a way that keeps keys and values together
// then we .sort() based on size
const sorted = (
Object.entries(data)
.sort((x, y) => x[1].size - y[1].size)
)
console.log('sorted keys and values', sorted)
// If you want, you can then split them back out into two separate array, like you had it:
console.log('sorted keys', sorted.map(x => x[0]))
console.log('sorted values', sorted.map(x => x[1])) Смотрите Это, чтобы узнать об Object.entries, используемом в этом конкретном примере.
Ответ №2:
Скотти Джеймисон ответил первым и дал вам хорошее описание вариантов и альтернатив. Я настоятельно призываю вас принять его ответ.
Тем не менее, я решил, что не смогу предоставить свою работу, которую я разработал в ответ на ваш первоначальный вопрос, неправильно помеченный как дубликат (как вы упомянули в комментариях к вашему вопросу здесь). Это более полностью проработанная версия первого предложения Скотти, которая помещает внешний ключ в качестве свойства внутри элемента массива.
// Just a convenience for building productDetails
let pdVal = (id,no,name,size,colors,desc) => ({
id: id,
partNo: no,
productName: name,
size: size,
color: colors,
description: desc
})
let productDetails = {
"10": [pdVal("1","100","bag","30",["Blue"],"sky bags ")],
"20": [pdVal("2","15","bottle","10",["Green", "Orange"],"plastic and still")],
"30": [pdVal("4","25","lunchbox","20",["Blue", "Red"],"fresh food")],
"40": [pdVal("3","45","pen","10",["Red", "Blue"],"gel pen ")]
};
function sortByPartNo() {
let arr = [];
for (let key of Object.keys(productDetails)) {
let obj = productDetails[key][0];
arr.push(Object.assign({}, obj, {key}));
}
arr.sort((a,b) => parseFloat(a.partNo) - parseFloat(b.partNo))
printArray(arr);
}
function printArray(arr) {
messageTable(" ");
let table = `
<table border = 1 cellpadding = 10 >
<th colspan=7 >Product Details</th>
<tr>
<th>sr No</th>
<th>Product Id</th>
<th>Part No</th>
<th>Name</th>
<th>Size</th>
<th>Color</th>
<th>Description</th>
</tr>
`;
for (let item of arr) {
console.log({arr})
table = "<tr><td>" item.key "</td>";
table = "<td>" item.id "</td>";
table = "<td>" item.partNo "</td>";
table = "<td>" item.productName "</td>";
table = "<td>" item.size "</td>";
table = "<td>" item.color "</td>";
table = "<td>" item.description "</td>";
}
messageTable(table);
}
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
} <input type="button" value="sortByPartNo" onclick="sortByPartNo();">amp;nbsp;
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>