Вывод в html двумерного массива из js
Пока плохо разбираюсь в js, не подскажете как реализовать это задание? Или объяснить написанное в задании. По заданию, у меня есть двумерный массив js (часть его ниже), и его нужно представить в виде таблицы:
Помогите с реализацией последних пунктов, никак не могу понять
Вот пока всё что я сделала:
/** Информация о государствах мира **/
var about = ["Государство", "Столица", "Континент", "Часть света", "Разница во времени",
"Денежная единица", "Географические объекты", "Литературные произведения",
"Исторические события"
];
var countries = [
["Италия", "Рим", "Евразия", "Европа", -2, "итальянская лира", ["Альпы", "Пальмария", "Апеннинский полуостров", "Комо", "Тальяменто"],
[
["Джованни Верга", "Жизнь среди полей", 1880],
["Анна Виванти", "Цирцея", 1912],
["Джузеппе Понтиджа", "Рождённые дважды", 2000]
],
{
"1882": "избирательная реформа",
"1945": "антифашистское восстание, 18-28 апреля"
}
],
["Франция", "Париж", "Евразия", "Европа", -1, "евро", ["Эндр", "Пиренеи", "Луара", "Альпы", "Бискайский залив"],
[
["Александр Дюма", "Граф Монте-Кристо", 1845],
["Жюль Габриэль Верн", "Завещание чудака", 1900],
["Луи Анри Буссенар", "Капитан Сорви-голова", 2001],
["Морис Самюэль Роже Шарль Дрюон", "Тисту — мальчик с зелеными пальцами", 1957]
],
{
"1572": "Варфоломеевская ночь",
"1648": "Вестфальский мир",
"1914": "Марнское сражение, 5-12 сентября"
}
],
["Швейцария", "отсутствует", "Евразия", "Европа", -1, "Швейцарский франк", ["Бильское озеро", "Рейхенбахский водопад", "Альпы", "Алечский ледник"],
[
["Иоханна Спири", "Хайди: годы странствий и учёбы", 1880],
["Герман Гессе", "Игра в бисер", 1942],
["Макс Фриш", "Homo Фабер", 1957],
["Мелинда Надь Абонджи", "Голуби взлетают", 2010]
],
{
"1291": "основание Швейцарии",
"1844": "начало работы первой железнодорожной линией"
}
],
["Венгрия", "Будапешт", "Евразия", "Европа", -1, "Венгерский форинт", ["Геллерт", "Карпаты", "Веленце", "Мезёфёльд"],
[
["Янош Бачаньи", "Мужество венгров", 1785],
["Аттила Бартиш", "Спокойствие", 2001],
["Ийеш Дьюла", "Двое мужчин", 1950]
],
{
"1222": "подписание Эндре II «Золотой буллы»",
"1867": "Коронование Франца-Иосифа в Будапеште по старым обычаям, 8 июня"
}
],
["Румыния", "Бухарест", "Евразия", "Европа", 0, "Румынский лей", ["Олт", "Трансильванское плато", "Карпаты", "Медвежья пещера", "Бабеле"],
[
["Михаил Садовяну", "Золотая ветвь", 1933],
["Мирча Элиаде", "Изабель и воды дьявола", 1930]
],
{
"1881": "Румыния была провозглашена королевством",
"1990": "первые свободные президентские и парламентские выборы",
"2004": "Румыния стала членом НАТО"
}
],
["Япония", "Токио", "Евразия", "Азия", 6, "японская иена", ["Фудзияма", "Сакурадзима", "Абукума"],
[
["Сюсаку Эндо", "Море и яд", 1958],
["Юдзо Ямамото", "Профессор Цумура", 1919],
["Марико Хасиока", "Аут", 1997]
],
{
"1872": " отменена сложного и строгого сословного деления",
"1904": "японский флот атаковал русскую эскадру в Порт-Артуре",
"1941": "атака на Пёрл-Харбор"
}
],
["Афганистан", "Кабул", "Евразия", "Азия", 1.5, "афгани", ["Намакзар", "Дашти-Марго", "Фарахруд", "Гиндукуш"],
[
["Гуль Пача Ульфат", "Голос сердца", 1962],
["Абдуррауф Бенава", "Горестные размышления", 1957],
["Махмуд-бек Тарзи", "Путешествия через три континента за 29 дней", 1914]
],
{
"1973": "провозглашение Республики, 17 июля",
"2004": "новая Конституция и проведены первые президентские выборы"
}
],
["Индия", "Нью-Дели", "Евразия", "Азия", 2.5, "Индийская рупия", ["Ганг", "Гуру-Сикар", "Дудхсагар", "Цо-Морари", "Деканские траппы"],
[
["Арундати Рой", "Бог мелочей", 1997],
["Хушвант Сингх", "Поезд в Пакистан", 1956]
],
{
"1857": "Восстание Сипаев",
"1617": "Британская Ост-Индская компания получила право торговать с Индией",
"1948": "Операция «Поло»",
"1986": "архитектурное наследие Хампи включено в список Всемирного наследия"
}
],
["Бразилия", "Бразилиа", "Южная Америка", "Америка", -6, "риал", ["Тапажос", "Пантанал", "пампа", "Сейшас", "Параноа"],
[
["Лима Баррето", "Жалкий конец Поликарпо Кваресма", 1911],
["Эрику Верисиму", "Происшествие в Антаресе", 1971],
["Шику Буарки", "Будапешт ", 2003],
["Жоаким Мануэл ди Маседу", "Смуглянка", 1844]
],
{
"1888": "Золотой закон об отмене рабства в Бразилии, 13 мая",
"1935": "вооружённое выступление бразильских коммунистов и тенентистов"
}
],
["Канада", "Оттава", "Северная Америка", "Америка", -7, "канадский доллар", ["Фанди", "Подкова", "Элсмир", "Невольничье озеро", "Оттава"],
[
["Филип Майкл Ондатже", "Английский пациент", 1992],
["Маргарет Этвуд", "Up In The Tree", 1978]
],
{
"1608": "основание города Квебек",
"1838": "Битва за ветряную мельницу",
"1867": "Канада получила право формировать собственное правительство"
}
],
["Аргентина", "Буэнос-Айрес", "Южная Америка", "Америка", -6, "аргентинское песо", ["Охос-дель-Саладо", "Огненная земля", "Пампа", "Лагунас-де-Гуанакаче"],
[
["Хорхе Луис Борхес", "Фунес памятливый", 1942]
],
{
"1912": "закон о всеобщем избирательном праве",
"1871": "Завоевание пустыни",
"1810": "Аргентинская война за независимость"
}
],
["Колумбия", "Богота", "Южная Америка", "Америка", -8, "колумбийское песо", ["Кристобаль-Колон", "Магдалена", "Каука", "Анды", "Льянос"],
[
["Рафаэль Помбо", "Флибустьеры", 1856],
["Хосе Эустасио Ривера", "Вихрь", 1924],
["Лаура Рестрепо", "Леопард на солнце", 1993]
],
{
"1916": "обнаружены богатейшие запасы нефти",
"1549": "образование королевской аудиенсии и канцелярии Санта-Фе де Боготы",
"1886": "принята консервативная конституция"
}
],
["Англия", "Лондон", "", "", -3, "фунт стерлингов", ["Тис", "Белые клифы Дувра", "Саут-Даунс", "Скофелл-Пайк"],
[
["Майн Рида", "Огненная земля", 1883],
["Уильям Шекспир", "Ромео и Джульетта", 1595],
["Оскар Уайльд", "Портрет Дориана Грея", 1891],
["Джонатан Свифт", "Путешествия в некоторые удалённые страны мира в четырёх частях: сочинение Лемюэля Гулливера, сначала хирурга, а затем капитана нескольких кораблей", 1726]
],
{
"1701": "Акт о престолонаследии",
"1455": "начало войны Алой и Белой розы",
"1215": "Великая хартия вольностей"
}
],
["Мексика", "Мехико", "Южная Америка", "Америка", -9, "мексиканское песо", ["Попокатепетль", "Калифорния", "Эль-Вискаино", "Сонора", "Чапала", "Гуадалупе", "Пещера Ласточек"],
[
["Октавио Пас", "Salamandra", 1962],
["Амадо Нерво", "Недвижная возлюбленная", 1922],
["Карлос Фуэнтес", "Смерть Артемио Круса", 1962],
["Хуан Рульфо", "Педро Парамо", 1955]
],
{
"1810": "Мексиканская война за независимость",
"1536": "открытие коллегиума Санта-Крус де Тлателолько",
"2006": "Революция кактусов"
}
]
];
function makeTableFromCountry(country) {
var i = 0;
tab = '<table width = 100%>';
//
tab += '<tr>';
tab += '<td><h1>' + country[0] + ' - ' + country[1] + '</h1></tr>';
tab += '</tr>';
tab += '<tr><td>';
tab += '<table width=70%>';
for(i = 2; i <= 5; i++){
tab += '<tr><td><i>' + about[i] + '</i></td><td>' + country[i] + '</td></tr>';
}
tab += '</table>'
tab += '</td></tr>';
tab += '<tr><td>';
tab += '<table>';
tab += '</table>';
tab += '</td></tr>';
tab += '<tr><td><p>' + about[8] + '</p></td></tr>';
tab += '<tr><td><table>';
var i;
//console.log(country.lenght);
for (i = 0; i < country[8].lenght; i++) {
tab += '<tr>' + country[8][i] + '</tr>';
}
//
tab += '</table>';
return tab;
}
qwerty = countries.map(makeTableFromCountry);
qwerty.forEach(function(info, i, arr) {
document.body.innerHTML += info + "</br>";
});
<!DOCTYPE html>
<html>
<head>
<title>Лабораторная работа №3</title>
</head>
<body>
<header>
<h1>Информация о государствах</h1>
</header>
</body>
</html>
Ответы (1 шт):
Автор решения: Arturas Lapinskas
→ Ссылка
function outArrayData(data){
var result = "";
data.forEach(function(listItem) {
result += "<li>" + listItem + "</li>";
});
return result;
}
function objectAsTable(historyObject) {
var historyDates = Object.keys(historyObject);
var tableLength = historyDates.length;
var result = "";
for(i = 0; i < tableLength; i++){
var currentKey = historyDates[i];
result += "<td><b>" + currentKey + "</b> " + historyObject[currentKey] + "</td>";
}
return result;
}
function makeTableFromCountry(country) {
var i = 0;
tab = '<table width = 100%>';
//
tab += '<tr>';
tab += '<td><h1>' + country[0] + ' - ' + country[1] + '</h1></tr>';
tab += '</tr>';
tab += '<tr><td>';
tab += '<table width=70%>';
for(i = 2; i <= 7; i++){
switch (i) {
case 6:
//объекты
tab += '<tr><td><i>' + about[i] + '</i></td><td><ol>' + outArrayData(country[i]) + '</ol></td></tr>';
break;
case 7:
//произведения
tab += '<tr><td><i>' + about[i] + '</i></td><td><ol>' + outArrayData(country[i]) + '</ol></td></tr>';
break;
default:
tab += '<tr><td><i>' + about[i] + '</i></td><td>' + country[i] + '</td></tr>';
}
}
tab += '</table>'
tab += '</td></tr>';
tab += '<tr><td>';
tab += '<table>';
tab += '</table>';
tab += '</td></tr>';
tab += '<tr><td><b>' + about[8] + '</b></td></tr>';
tab += '<tr><td><table>';
tab += '<tr>' + objectAsTable(country[8]) + '</tr>';
//
tab += '</table>';
return tab;
}
qwerty = countries.map(makeTableFromCountry);
qwerty.forEach(function(info, i, arr) {
document.body.innerHTML += info + "</br>";
});
