Javascript Ожидание результата, прежде чем продолжить
Я новичок в Javascript и пытаюсь запустить, прежде чем я могу ходить, но я должен дать результат, так что я здесь.
Я думал, что нашел ответ на этот вопрос в другом вопросе, но он не сработал для меня, как ожидалось, ниже мой сценарий, функция которого заключается в просмотре списка SharePoint и возвращении некоторых значений в 3 массива, затем я использую эти массивы предоставить данные для завершения некоторых данных диаграммы.
<script>
// load all necessary sharepoint javascript libaries
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
// load the sharepoint list.
loadSharepointList();
});
var arrPlan = new Array()
var arrActual = new Array()
var arrMonth = new Array()
// loads the sharepoint list
function loadSharepointList() {
// create the sharepoint content.
var context = SP.ClientContext.get_current();
// get the list by the title.
var list = context.get_web().get_lists().getByTitle('Package');
// create the query.
var caml = new SP.CamlQuery();
caml.set_viewXml('');
// get the list items asynchronously
var listItems = list.getItems(caml);
context.load(listItems , 'Include(Title,Month,Plan,Actual)');
context.executeQueryAsync(
// success delegate
Function.createDelegate(this, function() {
// loop through the items.
var listEnumerator = listItems.getEnumerator();
while (listEnumerator.moveNext()) {
// get the current list item.
var listItem = listEnumerator.get_current();
// get the field value.
var titleValue = listItem.get_item('Month');
var monthValue = listItem.get_item('Month');
var planValue = listItem.get_item('Plan');
var actualValue = listItem.get_item('Actual');
//alert(monthValue);
arrPlan.push(planValue);
arrActual.push(actualValue);
arrMonth.push(monthValue);
//alert(arrMonth);
}
}),
// error delegate
Function.createDelegate(this, function() {
alert('Error fetching data from Sharepoint!');
}));
}
//var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"];
var netpphcanvas = document.getElementById("pphchart");
var planData = {
label: 'Plan',
fill: false,
data: [1.06,1.58,1.74,1.62,1.50,1.37,1.36,1.44,1.84,1.76],
backgroundColor: 'rgba(133, 133, 133, 1)',
borderColor: 'rgba(133, 133, 133, 1)',
borderWidth: 3,
yAxisID: "y-axis-region"
};
var actualData = {
label: 'Actual',
fill: false,
data: [1.37,1.65,1.84, 1.78,1.55, 1.74,1.57, 1.74,1.90,1.63],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderColor: 'rgba(99, 132, 0, 0.6)',
borderWidth: 3,
yAxisID: "y-axis-region"
};
//********This is the part I am using for testing
//***********
var netpphData = {
//labels: labels,
labels: arrMonth,
datasets: [planData,actualData]
};
var netdelOptions = {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.6
}],
yAxes: [{
id: "y-axis-region"
}]
},
elements: {
line: {
tension: 0, // disables bezier curves
}
},
title: {
display: true,
text: 'Net-Delivered PPH',
fontSize: 12
},
legend: {
display: true,
labels: {
fontColor: '#000',
fontSize: 12
}
}
};
var lineChart = new Chart(netpphcanvas, {
type: 'line',
data: netpphData,
options: netdelOptions
});
</script>
Я пытаюсь использовать возвращенные массивы, чтобы заполнить раздел "Данные и метки" диаграммы, чтобы проверить это, я начинаю с ежемесячных данных, которые извлекаются в этом разделе кода...
context.executeQueryAsync(
// success delegate
Function.createDelegate(this, function() {
// loop through the items.
var listEnumerator = listItems.getEnumerator();
while (listEnumerator.moveNext()) {
// get the current list item.
var listItem = listEnumerator.get_current();
// get the field value.
var titleValue = listItem.get_item('Month');
var monthValue = listItem.get_item('Month');
var planValue = listItem.get_item('Plan');
var actualValue = listItem.get_item('Actual');
//alert(monthValue);
arrPlan.push(planValue);
arrActual.push(actualValue);
arrMonth.push(monthValue);
//alert(arrMonth);
}
}),
Я проверил это работает с помощью метода alert, и он действительно возвращает месяцы в массив с именем arrMonth
однако остальная часть сценария, по-видимому, запускается до обращения к этому источнику данных и заполнения arrMonth.
Я проверил это также с помощью другого массива, называемого метками, и вручную заполнил его, и он работает правильно.
Я думал, что причина этого в том, что функция для получения данных вызывается асинхронно
context.executeQueryAsync(
Тем не менее, я изменил это на context.executeQuery( и все еще получил тот же результат, что страница загружается до того, как данные получены
Понятно, что я что-то упустил, и я был бы признателен за любую помощь
С наилучшими пожеланиями, Дерек
1 ответ
Вам нужно будет связать обещания, чтобы убедиться, что все это выполняется в последовательности.
Эти две ссылки помогут вам:
Что означает функция then() в JavaScript?
И это полезное руководство по цепочке обещаний. https://javascript.info/promise-chaining