Динамически генерируйте div в зависимости от того, сколько элементов присутствует в данных - PullRequest
Новая
       23

Динамически генерируйте div в зависимости от того, сколько элементов присутствует в данных

0 голосов
/ 22 апреля 2019

В моем бэкэнде у меня есть семь категорий, и я хочу динамически создавать элементы div для размещения каждой из них. Данные извлекаются через axios, и я могу видеть, как данные выглядят через его URL.

Фрагмент JS: 

import $ from 'jquery';
import axios from 'axios';

let _library,
    _categories;

export default class {
    constructor() {
        this.callRESTAPI();
    }

    callRESTAPI(){
        axios.all([
            axios.get([redacted].siteAbsoluteUrl + "/[redacted]/_api/web/lists/getByTitle('Categories')/items?$select=Title,Description&$orderby=Title&$top=1000", {
                method: "GET",
                credentials: "include",
                mode: "no-cors",
                headers: {
                    "Accept": "application/json; odata=verbose"
                }
            }),

    /// irrelevant code ///

    ]).then(axios.spread((cat, lib, admn) => {
            _categories = cat.data.d.results;
            _library = lib.data.d.results;

            this.loadCourses();
        })).catch(error => {
            console.log(error);
        });
    }

    getCategories(){
        return _categories;
    }

    loadCourses() {
        let crs = _library
            .map(x => {
                return x.Category.Title;
            }).sort();

        this.populateCategory(crs, "div.top-training");

        let htmlElems = "";
        for (var i = 0; i < crs.length; i++) {
            htmlElems += "<div class='box'></div>";
        }

        let container = document.getElementById("container");
        container.innerHTML = htmlElems;

    }

Фрагмент HTML: 

<div class="top-training"></div>

Фрагмент данных: 

<feed xmlns="">
<id></id>
<content type="application/xml">
<m:properties>
 <d:Title>Animals</d:Title>
 <d:Description>
   Animals are multicellular...
 </d:Description>
</m:properties>
</content>
</entry>
...