.JSON в HTML-таблицу с возможностью поиска в Javascript... почему я не могу изменить значения JSON?Html

Программисты Html
Ответить
Anonymous
 .JSON в HTML-таблицу с возможностью поиска в Javascript... почему я не могу изменить значения JSON?

Сообщение Anonymous »

Обязательно «Я новый программист». Поэтому я поставил перед собой задачу реализовать такой фронтенд-проект, который мне действительно мог бы поручить на работе, и решил взять .json заказов клиентов и поместить их на панель мониторинга, по которой затем можно будет осуществлять поиск. У меня сейчас проблемы.

Код: Выделить всё




th{
cursor: pointer;
color:#fff;
}











Name &#9650
Age &#9650
Birthday &#9650







var myArray = [
{'name':'Michael', 'age':'30', 'birthdate':'11/10/1989', 'email':'None'},
{'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
{'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
{'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
{'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
{'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
]
$('#search-input').on('keyup', function(){
var value = $(this).val()
console.log('Value:', value)
var data = searchTable(value, myArray)
buildTable(data)
})

buildTable(myArray)

function searchTable(value, data){
var filteredData = []

for (var i = 0; i < data.length; i++){
value = value.toLowerCase()
var name = data[i].name.toLowerCase()

if (name.includes(value)){
filteredData.push(data[i])
}
}

return filteredData
}

$('th').on('click', function(){
var column = $(this).data('colname')
var order = $(this).data('order')
var text = $(this).html()
text = text.substring(0, text.length - 1);

if (order == 'desc'){
myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
$(this).data("order","asc");
text += '&#9660'
} else {
myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
$(this).data("order","desc");
text += '&#9650'
}

$(this).html(text)
buildTable(myArray)
})

function buildTable(data){
var table = document.getElementById('myTable')
table.innerHTML = ''
for (var i = 0; i < data.length;  i++){
var colname = `id-${i}`
var colage = `age-${i}`
var colbirth = `birth-${i}`

var row = `
${data[i].name}
${data[i].age}
${data[i].birthdate}
`
table.innerHTML += row
}
}


Этот код, который я нашел на Github, в основном выполняет свою работу, проблема в том, что это должен быть код .JSON:

Код: Выделить всё

[
{
"id": "ORD-001",
"date": "2025-10-15",
"email": "alex.johnson@example.com",
"status": "paid",
"subtotal": 47.5,
"tax": 3.8,
"shipping": 5,
"discount": 0
},
{
"id": "ORD-002",
"date": "2025-10-14",
"email": "maria.garcia@example.com",
"status": "pending",
"subtotal": 84.99,
"tax": 7.2,
"shipping": 5,
"discount": 10
},
{
"id": "ORD-003",
"date": "2025-10-13",
"email": "sam.lee@example.com",
"status": "refunded",
"subtotal": 25,
"tax": 2,
"shipping": 0,
"discount": 0
},
{
"id": "ORD-004",
"date": "2025-10-12",
"email": "taylor.brown@example.com",
"status": "paid",
"subtotal": 125,
"tax": 10,
"shipping": 5,
"discount": 0
}
]
Когда я пытаюсь изменить «имя» на «id» и тому подобное, чтобы оно совпадало, код нарушается. Изменение имени в ${data.name} с его помощью тоже не работает. Может ли кто-нибудь помочь мне понять, что делать?
Я попробовал изменить части JSON «имя, дата и дата рождения» на то, что мне нужно: идентификатор, дата, адрес электронной почты, статус и т. д. Я думал, что это позволит мне легко менять категории, но это просто нарушает код.

Подробнее здесь: https://stackoverflow.com/questions/797 ... json-value
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»