Помогите решить задачу!
приветствую! у меня такой вопрос..
Есть список постов, их я выгружаю из https://gorest.co.in и мне надо при нажатии на кнопку, которая располагается в картой карточке открыть детально на новой странице эту карточку(получается новый html документ ), детальная страница статьи, которую можно получить запросом https://gorest.co.in/public-api/posts/{id статьи}. При этом id статьи должен браться из URL страницы из параметра id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./swiper.js"></script>
<script defer src="./main.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
<header>
<div class="container">
<div class="header__block"></div>
</div>
</header>
<main>
<div class="container">
<h1>List of post</h1>
<div class="slider-wrap js-slider-main">
<div class="slider js-slider">
<div id="post" class="slides-wrap js-slides-wrap">
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</div>
</main>
<footer>
<div class="container">
<div class="footer__block"></div>
</div>
</footer>
</body>
</html>
const searchParams = new URLSearchParams(location.search);
const userId = searchParams.get('user_id')
if (userId) {
fetch(`https://gorest.co.in/public/v1/posts/${user_id}`)
.then(response => response.json())
.then(json => {
console.log(json.data);
const markup = json.data.map(el => {
return `
`;
})
console.log(markup);
document.getElementById("post").innerHTML = markup;
})
} else {
fetch('https://gorest.co.in/public/v1/posts')
.then(response => response.json())
.then(json => {
console.log(json.data);
const markup = json.data.map(el => {
return `
<div class="swiper-slide">
<div class="slide__img" style="max-width:300px;">
<img src="" alt="">
</div>
<h2 class="slide__title">${el.title}</h2>
<p class="slide__body">${el.body}</p>
<button class="btn-more" type="submit">Click for read</button>
</div>
`;
})
console.log(markup);
// markup = markup.reduce((acc, el) => acc + el, "")
document.getElementById("post").innerHTML = markup;
})
}
|
TomWalbridge,
строка 5 user_id |
Спасибо за ответ!
Еще такой вопрос.. У меня есть список страниц, на каждой странице есть список постов, и мне надо добавить кнопку, которая перелистывает на след и предыдущую страницы, показывая содержимое выбранной страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./choices.min.css">
<script defer src="./main.js"></script>
<script defer src="./choices.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="header__block">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a class="header__nav-link" href=""> lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="container">
<h1>List of post</h1>
<div class="pagination">
<button href="" class="btn-pagination pagination-prev"></button>
<button href="" class="btn-pagination pagination-next"></button>
</div>
<select name="select" class="nav__list select" onchange="window.location.href=this.options[this.selectedIndex].value">
</select>
<div class="posts-list"></div>
</div>
</main>
<footer>
<div class="container">
<div class="footer__block">
<ul class="footer__social-list">
<li class="social-item">
<a class="social-item-link" href=""></a>
</li>
<li class="social-item">
<a class="social-item-link" href=""></a>
</li>
<li class="social-item">
<a class="social-item-link" href=""></a>
</li>
</ul>
</div>
</div>
</footer>
<script >
(async function() {
const postNav = document.querySelector('.nav__list');
const postPage = document.querySelector('.comments-container');
if (postNav) {
createPostsNav();
createPostsList();
}
if (postPage) {
createPostPage();
createPostComment();
}
async function createPostComment() {
const commentBlock = document.querySelector('.comments-block');
let postComment = '';
const pageParams = new URLSearchParams(location.search);
const postId = pageParams.get('id');
const response = await fetch(`http://gorest.co.in/public-api/comments?post_id=${postId}`);
const result = await response.json();
const comment = result.data;
comment.map(item => {
postComment = `
<div class="block-avatar"></div>
<div class="card-comment">
<div class="card-header">
<span class="span-from">From:</span>
${item.email}
</div>
<div class="card-body">
<h3 class="card-title">${item.name}</h3>
<p class="card-text">${item.body}</p>
</div>
</div>
`;
commentBlock.innerHTML = postComment;
});
}
async function getPostsData() {
const pageParams = new URLSearchParams(location.search);
const postPage = pageParams.get('page');
const response = await fetch(`http://gorest.co.in/public-api/posts?page=${postPage == null ? 1 : postPage}`);
const result = await response.json();
return {
posts: result.data,
pagination: result.meta.pagination,
};
}
async function createPostPage() {
const postPage = document.querySelector('.post-block');
let postContent = '';
const pageParams = new URLSearchParams(location.search);
const postId = pageParams.get('id');
const response = await fetch(`http://gorest.co.in/public-api/posts/${postId}`);
const result = await response.json();
const post = result.data;
postContent = `
<div class="card">
<div class="card-body">
<div class="card-img">
<p class="card-img-text">Image</p>
</div>
<h1 class="card-title">${post.title}</h1>
<p class="card-text">${post.body}</p>
</div>
</div>
`;
postPage.innerHTML = postContent;
}
// <a class="nav__link" href="">
// Page ${i}
// </a>
async function createPostsNav() {
const pagination = await getPostsData();
const postsNav = document.querySelector('.nav__list');
let postNav = '';
for (let i = 1; i <= pagination.pagination.pages; i++) {
postNav += `
<option value="index.html?page=${i}"> Page ${i}
</option>
`;
postsNav.innerHTML = postNav;
}
}
async function createPostsList() {
const posts = await getPostsData();
const postsList = document.querySelector('.posts-list');
let postItem = '';
for (let i = 0; i < posts.posts.length; i++) {
postItem += `
<div class="slide__blocks">
<div class="card-img">
<p class="card-img-text">Image</p>
</div>
<h3 class="slide__title">${posts.posts[i].title}</h3>
<p class="slide__body">${posts.posts[i].body}</p>
<a class=" btn-more" href="post.html?id=${posts.posts[i].id}">
Click for read
</a>
</div>
`;
postsList.innerHTML = postItem;
}
}
}());
</script>
</body>
</html>
|
TomWalbridge,
вариант для медитации
async function createPostsNav() {
const pagination = await getPostsData();
const postsNav = document.querySelector('.nav__list');
let postNav = '';
for (let i = 1; i <= pagination.pagination.pages; i++) {
postNav += `
<option value="index.html?page=${i}"> Page ${i}
</option>
`;
postsNav.innerHTML = postNav;
}
const paginationNav = document.querySelector('.pagination');
paginationNav.addEventListener( "click" , function(event) {
let btn = event.target.closest('.btn-pagination');
if(btn) {
event.preventDefault();
let i = postsNav.selectedIndex;
let up = btn.classList.contains('pagination-prev') ? -1 : 1;
let len = postsNav.options.length - 1;
let k = i + up;
k = Math.max(0, Math.min(k , len));
if(k !== i) {
postsNav.selectedIndex = k;
// k++
//createPostsList(page=k)
}
}
});
}
|
Рони, благодарю! Вы спасли меня!
|
| Часовой пояс GMT +3, время: 22:00. |