JSON データを使用してコンテナー div 内に要素を作成するスクリプトがあります。JSON データを定期的に更新する別のスクリプトがありますが、setInterval を使用して、作成された要素で (ページを更新せずに) 新しい JSON データを自動更新しようとすると問題が発生します。
私は次のように変数を作成しています：
function renderElement(ajaxResponse) {
var responseArray = JSON.parse(ajaxResponse);
var container = document.getElementById("container");
次に、JSON データを使用して、次のような html を作成します。
for (var i = 0; i < responseArray.length; i += 1) {
var element = document.createElement("div");
element.className = "element";
}
var Score = document.createElement("p");
Score.className = "Score";
Score.innerHTML = responseArray[i].Score;
element.appendChild(Score);
container.appendChild(element);
}
}
ページを更新すると、JSON の他のスクリプトによって更新されたデータが表示されますが、ページを更新せずに新しいデータを表示したいと考えています。これを行うために setInterval を使用しようとしています。私が抱えている問題の 1 つは、ページの読み込み時に JSON データを使用できるようにし、5 秒ごとに更新する必要があることです。そうしないと、より広範なスクリプト (アイソトープ) が描画されません。
以下の返信の後、コードのさまざまな部分 (関数内、関数の後など) に以下を配置しました。ページが読み込まれますが、JSON が更新されると (ページを更新せずに) innerHTML 要素を更新できません。
setInterval(function() {renderElement(ajaxResponse); }, 5000);
どんな助けでも大歓迎です
アップデート：
私はそれを次のように変更しました：
setInterval(function() {renderElement(json); }, 5000);
したがって、私のajaxResponse変数は最新のデータで更新されており、追加しようとしました
setInterval(function() {renderElement(ajaxResponse); }, 10000);
関数内で innerHTML 要素を更新します。複数のインスタンスが（オリジナルの後ろに）描かれているのを見ることができるので、うまくいっていると思います。現在、要素 div を「クリア」しようとしているため、更新時に最初のデータ セットが保持されません。