Oracle JET - Создание диаграммы с JSON-данными

Question

Я пытаюсь заполнить круговую диаграмму некоторыми JSON-данными. Мой источник данных - restcountries.eu/rest/v2/all. Я извлекаю данные с помощью $ .getJSON и создаю временный массив, который, в свою очередь, используется в качестве источника данных. Затем я связываю источник с круговой диаграммой. Это то, что я думаю, я делаю по крайней мере ..

Я получаю следующую ошибку

my-piechart-viewModel.js: 25 Uncaught (в обещании) ReferenceError: данные не являются определенный в новой myPieChartModel (my-piechart-viewModel.js: 25) в Object.CreateComponent (ojcomposite.js: 1808) в ojcustomelement.js: 385

Мой код выглядит так

HTML

<oj-chart id="pieChart1" aria-label= 'TestPieChart'
          type="pie"
          series='[[datasource]]'
          style="max-width:500px;width:100%;height:350px;">
</oj-chart>

JS

function myPieChartModel() {
            var self = this;        
            self.data = ko.observableArray();
            $.getJSON("https://restcountries.eu/rest/v2/all").
                then(function(countries) {
                    var tempArray = [];
                    $.each(countries, function() {
                        tempArray.push({
                            name: this.name, 
                            population: this.population
                        });
                    });
                    self.data(tempArray);
            });
            self.datasource = ko.observableArray(data);
        }
    return myPieChartModel;

Что я делаю не так? Я очень плохо знаком с Oracle JET, и у меня очень мало опыта работы с JSON.

Answer 1

1. Если вы определили что-то как self.data, вы не сможете позже получить к нему доступ, просто позвонив data. Поэтому вам нужно изменить свою последнюю строку на:

self.datasource = ko.observableArray(self.data);

2. Даже если вы сделаете это, вы получите эту ошибку:

Аргумент, передаваемый при инициализации наблюдаемого массива, должен быть массивом, либо нулевым, либо неопределенным.

То есть вы не можете передать наблюдаемый массив в наблюдаемый массив. self.data должен быть просто обычным массивом JS.

self.data = [];

Но обычный массив JS не генерирует никаких событий при изменении его значений, поэтому вам придется снова обновить observableArray datasource. Ваш полный код может быть таким:

function myPieChartModel() {
        var self = this;        
        self.data = [];
        self.datasource = ko.observableArray(self.data);
        $.getJSON("https://restcountries.eu/rest/v2/all").
            then(function(countries) {
                $.each(countries, function() {
                    self.data.push({
                        name: this.name, 
                        population: this.population
                    });
                });
                self.datasource(self.data);
        });
    }
return myPieChartModel;

---

Дайте мне знать, если это работает. У меня есть ощущение, что ваши данные JSON также необходимо будет изменить следующим образом:

self.data.push({name: this.name, 
                items: [this.population]
               });

Почему? Потому что именно так Oracle ожидает JET. Вот документация .