Функция работает только на первом селекторе отображаемых данных API с использованием async-await - PullRequest
Новая
       17

Функция работает только на первом селекторе отображаемых данных API с использованием async-await

0 голосов
/ 24 января 2019

Я пытаюсь использовать multi-зажим.js для сжатия / усечения моих заголовков, которые возвращаются из API Reddit.

Тем не менее, он работает только над 1-ым перенастроенным заголовком, а не над всеми заголовками.Как бы убедиться, что функция работает на всех заголовках, возвращаемых из API, а не только 1-го?

const reddit = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

async function getData() {
    try {
        let response = await fetch(reddit);
        let data = await response.json()
        return data;
    } catch (error) {
        console.log("error", error);
    }
}

let a = 1;


getData()
    .then(data => data.data.children)
    .then(data => data.map(post => ({
        source: post.data.domain,
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        title: post.data.title,
        class: a++
    })))
    .then(data => data.map(render))

const app = document.querySelector('#app');

function clamp() {
    new MultiClamp(document.querySelector('.clamp'), {
        ellipsis: '...',
        clamp: 2
    });
}

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title clamp mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);
    clamp();
}

function clamp() - моя функция для запуска библиотеки MultiClamp.Функция const render = post => { - это то, где я рендерил возвращенные данные из API и запускаю функцию clamp().Это где он работает только на первом ${post.title}.

...