Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita68a569

Browse files
committed
feat(asset-mapper): document support for importing JSON assets in AssetMapper
1 parent537d2d6 commita68a569

File tree

1 file changed

+75
-0
lines changed

1 file changed

+75
-0
lines changed

‎frontend/asset_mapper.rst‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -510,6 +510,81 @@ the page. If you use a dynamic import to lazily-load a JavaScript file and that
510510
file imports a CSS file (using the non-dynamic ``import`` syntax), that CSS file
511511
will also be downloaded asynchronously.
512512

513+
Importing JSON files
514+
--------------------
515+
516+
..versionadded::7.4
517+
518+
Support for importing JSON assets was added in Symfony 7.4.
519+
520+
AssetMapper allows you to import JSON assets directly from your JavaScript code.
521+
While modern browsers support the native ``import data from './foo.json' with { type: 'json' }`` syntax,
522+
this feature is not yet widely supported. AssetMapper provides a fully compatible alternative
523+
without requiring any bundler.
524+
525+
AssetMapper provides a more compatible alternative by allowing you to import JSON
526+
files using the standard import syntax:
527+
528+
..code-block::javascript
529+
530+
// assets/app.js
531+
importdataPromisefrom'./data.json';
532+
533+
// The import returns a Promise that resolves to the JSON content
534+
constdata=await dataPromise;
535+
console.log(data.name);// Access your JSON data
536+
537+
Usage Example
538+
~~~~~~~~~~~~~
539+
540+
Consider a JSON file containing user data:
541+
542+
..code-block::json
543+
544+
{
545+
"users": [
546+
{"id":1,"name":"Alice","email":"alice@example.com"},
547+
{"id":2,"name":"Bob","email":"bob@example.com"}
548+
]
549+
}
550+
551+
You can import and use this data in your #"diff-a2220159377c0de535d5b1a19b871634733fca70a11805935ab2867be27e8dac-512-552-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">
552+
553+
..code-block::javascript
554+
555+
// assets/controllers/user-list-controller.js
556+
importusersPromisefrom'../data/users.json';
557+
558+
asyncfunctiondisplayUsers() {
559+
constuserData=await usersPromise;
560+
561+
userData.users.forEach(user=> {
562+
console.log(`${user.name}:${user.email}`);
563+
});
564+
}
565+
566+
displayUsers();
567+
568+
How it Works
569+
~~~~~~~~~~~~
570+
571+
When you import a JSON file, AssetMapper:
572+
573+
1. **Detects the JSON import** in your JavaScript files during asset processing
574+
2. **Creates a JavaScript module** that exports a Promise resolving to the JSON content
575+
3. **Adds it to the importmap** so your browser can locate and load it correctly
576+
4. **Versions the file** like any other asset, ensuring proper cache busting
577+
578+
This approach works in all modern browsers without requiring native JSON import
579+
support, making it a reliable alternative to the newer ``with { type: 'json' }``
580+
syntax.
581+
582+
..note::
583+
584+
Like CSS imports, JSON imports are processed by AssetMapper and added to the
585+
importmap automatically. The imported JSON assets are also versioned, so any
586+
changes to the JSON content will result in a new versioned filename.
587+
513588
Issues and Debugging
514589
--------------------
515590

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp