Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как вывести данные из JSON На сайт ? (https://javascript.ru/forum/dom-window/80099-kak-vyvesti-dannye-iz-json-na-sajjt.html)

tihonazima 28.04.2020 10:37

Как вывести данные из JSON На сайт ?
 
Есть JSON: https://vkdonate.ru/dc/5322a3c71cd992a6
Нужно чтобы на сайте показывались донаты
Сумма:
Сообщение:

Malleys 28.04.2020 16:02

Цитата:

Сообщение от tihonazima
Как вывести данные из JSON На сайт ?

Например так...
<donate-board>
	<style>
dl {}

dt, dd {
	display: inline;
}

dt {
	font-weight: bolder;
}

dd + dt::before {
	content: "\0a";
	white-space: pre;
}

dd {
	margin: 0;
	margin-left: 0.25em;
}

dd:empty::before {
	content: "(Пусто)";
	opacity: 0.5;
	font-style: italic;
}
	</style>
</donate-board>
<script>
(async function main() {
	let ul;
	try {
	const response = await fetch("https://cors-everywhere.glitch.me/https://vkdonate.ru/dc/5322a3c71cd992a6");
	const { last_donater: data } = await response.json();
	
	ul = document.createElement("ul");
	
	let list, node;
	
	for(const { id, sum, description } of data) {
		list = document.createElement("dl");
		ul.appendChild(list);
		
		for(const [t, d] of [["Сумма:", sum], ["Сообщение:", description]]) {
			for(const [tag, text] of [["dt", t], ["dd", d]]) {
				node = document.createElement(tag);
				node.textContent = text;
				list.appendChild(node);
			}
		}
	}
	} catch(error) {
		ul.textContent = "Ошибка получения и отображения данных";
	}
	
	const db = document.querySelector("donate-board");
	const s = db.attachShadow({ mode: "open" });
	s.appendChild(ul);
	s.append(...db.children);
})();
</script>


Так много нужно знать...

Malleys 28.04.2020 16:17

Также можно использовать, например, MAVO...

<script src="https://unpkg.com/mavo@0.2.0/dist/mavo.js"></script>
<section mv-app="donate-board" mv-storage="https://cors-everywhere.glitch.me/https://vkdonate.ru/dc/5322a3c71cd992a6">
	<ul>
		<li property="last_donater" mv-multiple>
			<dl>
				<dt>Сумма:</dt>
				<dd property="sum"></dd>
				
				<dt>Сообщение:</dt>
				<dd property="description"></dd>
			</dl>
		</li>
	</ul>
</section>
<style>
dl {}
dt, dd {
	display: inline;
}
dt {
	font-weight: bolder;
}
dd + dt::before {
	content: "\0a";
	white-space: pre;
}
dd {
	margin: 0;
	margin-left: 0.25em;
}
dd:empty::before {
	content: "(Пусто)";
	opacity: 0.5;
	font-style: italic;
}
</style>

рони 28.04.2020 16:27

Malleys,
:thanks:


Часовой пояс GMT +3, время: 12:32.