@Kerhin

JS, Как вывести данные в HTML элемент из объекта по клику?

У меня есть проблема. Не знаю как решить. Нужен чистый JS.

Есть многоуровневый объект, который делится на 4 этапа: Страна, Город, Улица, Достопримечательности. И 4 блока (2, 3 и 4 пустые).

1) Мне нужно, чтобы в первый блок выводился список стран, которые указаны в объекте;
60db12d83007a832435664.png

2) При клике на блок страны должны вывестись блоки с названиями городов и их описаниями, которые указаны в объекте под каждой из стран;
60db15b770a27962579791.png

3) Также при клике на блок города выводится список улиц указанных в объекте;
60db1799daf5c010273500.png

4) Ну и соответсвенно при клике на блок улицы, выводятся соответсвующие достопримечательности.
60db1b6356dc7672084065.png

Вот сам объект. Понятное дело, что в будущем он может увеличиваться или уменьшаться в своих размерах. Хотя и сам объект в теории можно реализовать немного по другому.

var countries = {
	'Russia': {
		className: 'russia',
		description: 'Russia, or the Russian Federation, is a country spanning Eastern Europe and Northern Asia.',

		'Moscow': {
			className: 'moscow',
			description: 'Moscow is the capital and largest city of Russia.',

			'Arbat': {
				className: 'arbat',
				description: 'Arbat Description',

				'Museum of illusions': {
					className: 'museumIllusions',
					decription: 'Museum of illusions Description'
				},
				'Actors house': {
					className: 'actorsHouse',
					decription: 'Actors house Description'
				},
				'The Pushkin Museum': {
					className: 'pushkin',
					decription: 'The Pushkin Museum Description'
				}
			},
			'Nikolskaya Street': {
				className: 'nikolskaya',
				description: 'Nikolskaya Street Description',

				'Kazan Cathedral': {
					className: 'kazanCathedral',
					decription: 'Kazan Cathedral Description'
				},
				'The old Mint': {
					className: 'oldMint',
					decription: 'The old Mint Description'
				}
			}
		},

		'Saint Petersburg': {
			className: 'petersburg',
			description: 'Saint Petersburg, formerly known as Petrograd (1914–1924) and later Leningrad (1924–1991), is the second-largest city in Russia.',

			'Malaya Sadovaya Street': {
				className: 'sadovaya',
				description: 'Malaya Sadovaya Street Description',

				'The Ushakov House': {
					className: 'ushakov',
					description: 'The Ushakov House Description',
				},
				'Yeliseyev Merchants Store': {
					className: 'yeliseyev',
					description: 'Yeliseyev Merchants Store Description',
				}
			},
			'Duma Street': {
				className: 'duma',
				description: 'Duma Street Description',

				'Catherines Garden': {
					className: 'catherinesGarden',
					description: 'Catherines Garden Description',
				}
			},
			'Liteyny Avenue': {
				className: 'liteyny',
				description: 'Liteyny Avenue Description',

				'Pelya House': {
					className: 'pelyaHouse',
					description: 'The Pelya House is a historical building in the center of St. Petersburg at the address Liteyny Prospekt, 46.'
				},
				'Stieglitz Museum': {
					className: 'stieglitzMuseum',
					description: 'The Stieglitz Museum of Decorative and Applied Arts ranks among the most significant museums in Saint Petersburg, Russia.'
				},
				'The house of Princess Yusupova': {
					className: 'yusupova',
					description: 'The initial design of the building was developed by the architect Harald Bosse, then Ludwig Bonstedt completed the work on the project and supervised the construction.'
				}
			}
		},

		'Novgorod': {
			className: 'novgorod',
			description: 'Novgorod, also known as Novgorod the Great, or Novgorod Veliky, or just Novgorod, is one of the oldest historic cities of Russia, with more than 1,000 years of history.',

			'Sofia Square': {
				className: 'sofiaSquare',
				description: 'Sofia Square Description',

				'Museum of Fine Arts': {
					className: 'fineArts',
					description: 'Museum of Fine Arts Description',
				},
				'Hagia Sophia': {
					className: 'hagiaSophia',
					description: 'Hagia Sophia Description',
				},
			}
		}
	},

	'Italy': {
		className: 'italy',
		description: 'Italy, officially the Italian Republic Italian: Repubblica Italiana is a country consisting of a peninsula delimited by the Alps and several islands surrounding it.',

		'Rome': {
			className: 'rome',
			description: 'Rome Description',

			'via Giulia': {
				className: 'viaGiulia',
				description: 'via Giulia Description',

				'Sisto bridge': {
					className: 'sistoBridge',
					description: 'Sisto bridge Description',
				},
				'the Farnese mansion': {
					className: 'farneseMansion',
					description: 'Farnese mansion Description',
				}
			},
			'via di Borgo Pio': {
				className: 'viaUrbana',
				description: 'via Urbana Description',

				'St. Peters Cathedral': {
					className: 'viaUrbana',
					description: 'via Urbana Description',
				}
			}
		},

		'Florence': {
			className: 'florence',
			description: 'Florence Description',

			'Piazza Duomo': {
				className: 'piazzaDuomo',
				description: 'Piazza Duomo Description',

				'Cathedral Square': {
					className: 'cathedralSquare',
					description: 'Cathedral Square Description',
				},
			},
			'Piazza della Signoria': {
				className: 'signoria',
				description: 'Piazza della Signoria Description',

				'Palazzo Vecchio': {
					className: 'palazzoVecchio',
					description: 'Palazzo Vecchio Description',
				},
			}
		},
	},

	'France': {
		className: 'france',
		description: 'France, officially the French Republic, is a country based in Western Europe, consisting of metropolitan France and several overseas regions and territories.',

		'Paris': {
			className: 'paris',
			description: 'Paris Description',

			'Champs-Elysees': {
				className: 'champsElysees',
				description: 'Champs-Elysees Description',

				'Triumphal Gate': {
					className: 'triumphalGate',
					description: 'Triumphal Gate Description',
				},
			},
			'Richelieu Street': {
				className: 'richelieuStreet',
				description: 'Richelieu Street Description',

				'The Louvre': {
					className: 'louvre',
					description: 'The Louvre Description',
				},
			}
		},

		'Lyon': {
			className: 'lyon',
			description: 'Lyon Description',

			'Presquile': {
				className: 'presquile',
				description: 'Presquile Description',

				'Place Bellecour': {
					className: 'placeBellecour',
					description: 'Place Bellecour Description',
				},
			}
		},
	},
}


Я поначалу думал реализовать подобную идею по-другому, создав несколько отдельных массивов, которые будут привязаны к отдельным html элементам. Но честно признаться это все выглядело, как один большой костыль.
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
@szQocks
Я сиськи царапал такому объекту...

https://jsfiddle.net/pg8sjfv9/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы