Snack での JSON 形式のデータの操作

Snack Expo で作成されたアプリでは、データをさまざまな方法で使用できます。データは JSON (JavaScript Object Notation) として保存される場合があります。この形式では、データをキーと値のペアとして簡単に保存したり、CSV ファイルに変換したりできます。この記事ではSnack上でJavaScriptを使用し、JSONデータを利用する方法を記載します。例 1 では、このデータを読み取り、テーブルとして表示する方法を示します。 2 番目の例では、JSON データを CSV ファイルとして保存し、ダウンロードする方法を示します。

アルゴリズム-1

ステップ 1 - 「react-native」からビューをインポートします。 JSON ファイルから JSON データをインポートすることもできます。ここでは、たとえば、products.json

が使用されます。

ステップ 2 - App.js を作成し、コードを記述します。

ステップ 3 - ID をキーとして使用し、json ファイルからすべての製品を取得します。

ステップ 4 - 最初にタイトルを表示し、次にマッピング機能を使用して各商品アイテムを取得します。表示する列を選択します。

ステップ 5 -

、、、

タグを使用して、データを表形式で表示します。

ステップ 6 - 結果を確認します。

例で使用される JSON ファイル: ファイル名 – products.json

＃＃＃例＃＃＃ リーリー

例 1: JSON データを読み取り、テーブルとして表示します。

プロジェクトで使用される重要なファイルは次のとおりです。

App.js

• App.js: これはプロジェクトのメイン JavaScript ファイルです。

＃＃＃例＃＃＃ リーリー

結果を見る 結果はオンラインで閲覧できます。ユーザーがコードを入力すると、デフォルトで Web ビューが選択され、結果がすぐに表示されます。

JSON データは、Snack の Web ビューにテーブルとして表示されます

Algorithm-2

ステップ 1

-「react-native」からビューをインポートします。 JSON ファイルから JSON データをインポートすることもできます。ここでは、例として products.json

を使用します。ステップ 2

- App.js を作成し、コードを記述します。

ステップ 3

- ID をキーとして使用して json ファイルからすべての製品を取得し、製品情報を表形式で表示します。

ステップ 4

- パラメーター データ、ファイル名、およびファイル タイプを使用して関数 downldFl() を作成します。 Blob() を使用してファイルの種類を指定し、window.URL.createObjectURL(blob) を使用してファイルをダウンロードします。

ステップ 5

-ヘッダーを「,」で接続し、「」で区切って JSON コンテンツを接続します。

ステップ 6 *-[CSV のダウンロード] をクリックし、ダウンロードしたファイルとその結果を確認します。

例 2: JSON データを CSV に変換し、ファイルをダウンロードします。

プロジェクトで使用される重要なファイルは次のとおりです。 span>

App.js

App.js: これはプロジェクトのメイン JavaScript ファイルです。

• ＃＃＃例＃＃＃ リーリー

  結果を見る

結果はオンラインで閲覧できます。ユーザーがダウンロード ボタンをクリックすると、ファイルがダウンロードされ、結果がすぐに表示されます。

[CSV のダウンロード] ボタンを押してファイルをダウンロードします。

ダウンロードしたJSONからなるCSVファイルの内容を表示します。

この記事では、Expo Snack アプリケーションで JSON を使用する方法の 2 つの異なる例を示します。まず、json ファイルを読み取り、その内容を表形式で表示するメソッドが提供されます。次に、選択した JSON データを CSV 形式で保存し、ファイルをダウンロードするメソッドが提供されます。

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