Как получить JSON с сервера?

Question

Нужно вывести на страницу данные с https://reqres.in/api/users?page=2 . Написал такой код:

const requestUrl = 'https://reqres.in/api/users?page=2';
const postWrapper = document.getElementById('post__wrapper');
let users = [];

const createTemplate = data => {
return template = `
    <div class="wrapper__post">
        <div class="page">PAGE: ${data.page}</div>
        <div class="per_page">PER PAGE: ${data.perPage}</div>
        <div class="total">TOTAL: ${data.total}</div>
        <div class="total_pages">TOTAL PAGES: ${data.totalPages}</div>
        <div class="data">DATA: ${data.data}</div>
    </div>
`
}

const getPosts = url => {
fetch(url)
     .then(response => response.json())
     .then(json => {
         users = json;
         users.forEach(item => {
             postWrapper.innerHTML += createTemplate(users);
         })
     })
}

getPosts(requestUrl);

Результат:

Подскажите, пожалуйста, как вывести данные на страницу?

Answer 1

const requestUrl = 'https://reqres.in/api/users?page=2';
const postWrapper = document.getElementById('post__wrapper');
let users = [];

const createTemplate = data => {
return template = `
    <div class="wrapper__post">
        <div class="page">PAGE: ${data.page}</div>
        <div class="per_page">PER PAGE: ${data.per_page}</div>
        <div class="total">TOTAL: ${data.total}</div>
        <div class="total_pages">TOTAL PAGES: ${data.total_pages}</div>
        <div class="data">DATA: ${data.data}</div>
    </div>
`;
}

const getPosts = url => {
fetch(url)
     .then(response => response.json())
     .then(json => {
        json.data = JSON.stringify(json.data);
        postWrapper.innerHTML += createTemplate(json);
     })
}

getPosts(requestUrl);

<div id="post__wrapper"></div>

Answer 2

    const requestUrl = 'https://reqres.in/api/users?page=2';
const postWrapper = document.getElementById('post__wrapper');

const createTemplate = data => {
  
    template = `
        <div class="wrapper__post">
            <div class="page">PAGE: ${data.page}</div>
            <div class="per_page">PER PAGE: ${data.per_page}</div>
            <div class="total">TOTAL: ${data.total}</div>
            <div class="total_pages">TOTAL PAGES: ${data.total_pages}</div>
            
        </div>
    `   
    postWrapper.innerHTML = template
    const allusers = document.querySelector('.wrapper__post');

    users = data.data

    for(let user of users) {
        userdada = `
        <div class="data">DATA: id:${user.id}, email:${user.email}</div>
        `
        allusers.innerHTML += userdada
    }
}  


const getPosts = url => {
fetch(url)
     .then(response => response.json())
     .then(json => {
        createTemplate(json);
     })
}

getPosts(requestUrl);

<div id="post__wrapper"></div>

БЛОГ НА HUSL

Как получить JSON с сервера?

Ответы (2 шт):