HTML 環境での JSON データの操作

私は最近、Web 開発プロジェクトで JSON を使用し始めましたが、JavaScript を使用して JSON を HTML と統合しようとしたときに興味深い問題に遭遇しました。具体的には、フェッチ関数を使用して JSON データを取得しました。これは、コンソールにデータを記録するのに最適でした。ただし、このデータを HTML 入力フィールドに表示しようとすると、いくつかの課題に遭遇しました。実際のデータを表示する代わりに、「未定義」または「[オブジェクト オブジェクト]」が表示されました。これは非同期動作が原因であると思われますが、async/await を使用すると解決する可能性があると読みました。ただし、これにより ES バージョン 8 に関連するエラーが発生しました。ほとんどのリソースがより複雑なプロジェクトを対象としているため、トラブルシューティングが困難でした。以下は私が現在作業しているコードです:

<頭>



<リンク rel="スタイルシート" href="json_example.css">






CSS ファイル (json_example.css)

CSS

#jsonInput {
位置: 固定;
トップ: 50%;
左: 50%;
変換: 変換(-50%, -50%);
幅: 400px;
高さ: 30px;
フォントサイズ: 16px;
パディング: 5px;
}
JavaScript ファイル (json_example.js)

JavaScript

`document.addEventListener("DOMContentLoaded", function() {
const jsonUrl = 'http://localhost:8080/data/person.json';

fetch(jsonUrl)
    .then(response => response.json())
    .then(data => {
        console.log(data);
        document.getElementById("jsonInput").value = JSON.stringify(data);
    })
    .catch(error => console.error('Error fetching JSON:', error));

});
JSON ファイル (person.json)

json

{
"名": "ジェーン",
"姓": "Doe",
「年齢」: 25、
"都市": "ロサンゼルス"
}`

このコードは JSON データをフェッチし、問題なくコンソールに表示します。ただし、このデータを HTML テキスト入力フィールドに挿入しようとすると、「未定義」値が返されるか、目的の JSON コンテンツではなく「[object Object]」が表示されます。 async/await を使用してフェッチの非同期性を処理すると効果があるかもしれませんが、ES バージョン 8 との互換性の問題が発生します。

テキスト入力フィールドのような HTML 要素内に JSON データを適切に表示するにはどうすればよいですか?
基本的な Web プロジェクトで JSON を使用する場合、非同期操作を処理するためのベスト プラクティスは何ですか?

以上がHTML 環境での JSON データの操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。