Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2020, 10:37
Новичок на форуме
Отправить личное сообщение для tihonazima Посмотреть профиль Найти все сообщения от tihonazima
 
Регистрация: 28.04.2020
Сообщений: 1

Как вывести данные из JSON На сайт ?
Есть JSON: https://vkdonate.ru/dc/5322a3c71cd992a6
Нужно чтобы на сайте показывались донаты
Сумма:
Сообщение:
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2020, 16:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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>


Так много нужно знать...
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2020, 16:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Также можно использовать, например, 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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.04.2020, 16:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Malleys,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить данные в highcharts? user71 Общие вопросы Javascript 40 08.08.2016 03:31
Как вывести данные из PHP Sherminator Events/DOM/Window 2 07.08.2012 20:11
Как разделить данные в JSON vyaceslav.kr jQuery 2 14.07.2012 18:34
Как вывести картинку по запросу Bon Events/DOM/Window 2 04.04.2012 02:20
как вывести картинку по запросу Bon Общие вопросы Javascript 0 03.04.2012 13:29