загрузить точки графиков из файла json

Question

есть идея хранить графики в json-файле вида

{
    "1": {
        "name": "график1",
        
        "points": [0, 10, 5, 2, 20, 30, 45]
    },
    "2": {
        "name": "график2",
        
        "points": [1, 2, 5, 2, 23, 10, 7]
    }
}

не могу понять, как их отобразить на странице. Проблема в том, что в коде ниже canvas еще не создан и сразу всунуть в него график я не могу

 $.getJSON('1.json', (data) => {
        let out = ''
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                
                out +=  `<div class="card" style="width: 18rem">
                <div class="card-body">
                  ${key.name}
                </div>
                <canvas id = ${key}></canvas>
                </div>` 
}}

а после создания карточек с canvas не знаю как к ним обратиться и на каждой нарисовать свой график.

Answer 1

забуть про ранее данный ответ ты же должен забрать данные которые в .json сохранил тоесть сделать запрос вот простой пример пример

//тема промисы + метод fetch + асинхронность + как бонус макрозадачи и микрозадачи(или задачи)
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then((json) => {
    // это асинхронный код он по любому выполнится после всего остального синхронного кода
    canvas = document.querySelector('your canvas selector')
    //... 
  })

Answer 2

$('document').ready(function () {
    loadCards() // при загрузке страницы выполняю функцию загрузки данных из json

})

// загрузка данных из json
async function loadCards() {
    fetch('1.json')
        .then(response => response.json())
        .then((json) => {
            let out = ''
            for (let key in json) {
                // создаю строку html с именами графиков из json и пустым канвасом для рисования
                out += `<div>${key}</div>                
            <canvas class = 'canvasClass' id = "${key}"></canvas>`
            }
            // вывожу пустые места под графики на страницу
            $('.container').html(out)
            // делаю цикл по канвасам на странице и отрисовываю там графики. не знаю как в data передать точки из json
            let elements = document.querySelectorAll('canvas.canvasClass')
            for (const elem in elements) {
                if (elements.hasOwnProperty(elem)) {
                    
                    const ctx = document.getElementById(elements[elem].id).getContext('2d')
                    const chart = new Chart(ctx, {
                        // The type of chart we want to create
                        type: 'bar',

                        // The data for our dataset
                        data: {
                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                            datasets: [{
                                label: 'My First dataset',
                                backgroundColor: 'rgb(255, 99, 132)',
                                borderColor: 'rgb(255, 99, 132)',
                                data: [1, 2, 3, 4, 5]
                            }],
                            // Configuration options go here
                            options: {}
                        }
                    })
                }
            }

        })

вот этот код работает у меня, но data: [1, 2, 3, 4, 5] я задаю явно, и не знаю как загрузить data из файла json

БЛОГ НА HUSL

загрузить точки графиков из файла json

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