Что я пытаюсь сделать: получить jpg / gifv / video из топ-постов reddit aww и jquery, добавляемых в html.
Моя проблема: Когда я просмотрел несколько разных постов, я понял, насколько сложны данные.нет ни одного конкретного ключа, который представляет данные.
- для jpg это просто: это data.children.url
- однако для gifv / video они есть везде. но одним общим ключом является "fallback_url" .но, как я уже сказал, они повсюду.
что я имею в виду под этим:
"media": {
"reddit_video": {
"fallback_url": "https://v.redd.it/8uxup7znzq121/DASH_1_2_M",
"reddit_video_preview": {
"fallback_url": "https://v.redd.it/xstmcxt8hs121/DASH_1_2_M",
"secure_media": {
"reddit_video": {
"fallback_url": "https://v.redd.it/syxgtvfsrs121/DASH_9_6_M",
Примеры:
Мой вопрос: есть ли способцикл по всему дереву данных и найти конкретный ключ "fallback_url"?Они имеют разную глубину: /
Как я собираюсь использовать данные:
, если это видео:
<video autoplay loop>
<source src="https://v.redd.it/dkalanbuyo121/DASH_4_8_M"/>
</video>
, еслиЭто картинка или GIF:
<img src="https://i.redd.it/ke4r7k9n7v121.jpg">
Вот моя рабочая попытка получить JPG / GIF:
$('#art').ready(function() {
$.getJSON("https://www.reddit.com/r/aww/hot.json?limit=1", function foo(result) {
var posts = [];
$.each(result.data.children.slice(0, 1), function(i, post) {
posts.push(post.data);
});
for (var i = 0; i < posts.length; i++) {
$("#text").append('<h4>' + posts[i].title + '</h4>');
$("#art").append('<img id=\"img" src=\"' + posts[i].url +'\"">');
}
});
});
--html--
<body>
<div class="container">
<div id="art" class="img column1">
</div>
<div id="text" class="comment column2">
</div>
</div>
</body>