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

Commitfec00d9

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

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
@@ -588,6 +588,81 @@ the page. If you use a dynamic import to lazily-load a JavaScript file and that
588588
file imports a CSS file (using the non-dynamic ``import`` syntax), that CSS file
589589
will also be downloaded asynchronously.
590590

591+
Importing JSON files
592+
--------------------
593+
594+
..versionadded::7.4
595+
596+
Support for importing JSON assets was added in Symfony 7.4.
597+
598+
AssetMapper allows you to import JSON assets directly from your JavaScript code.
599+
While modern browsers support the native ``import data from './foo.json' with { type: 'json' }`` syntax,
600+
this feature is not yet widely supported. AssetMapper provides a fully compatible alternative
601+
without requiring any bundler.
602+
603+
AssetMapper provides a more compatible alternative by allowing you to import JSON
604+
files using the standard import syntax:
605+
606+
..code-block::javascript
607+
608+
// assets/app.js
609+
importdataPromisefrom'./data.json';
610+
611+
// The import returns a Promise that resolves to the JSON content
612+
constdata=await dataPromise;
613+
console.log(data.name);// Access your JSON data
614+
615+
Usage Example
616+
~~~~~~~~~~~~~
617+
618+
Consider a JSON file containing user data:
619+
620+
..code-block::json
621+
622+
{
623+
"users": [
624+
{"id":1,"name":"Alice","email":"alice@example.com"},
625+
{"id":2,"name":"Bob","email":"bob@example.com"}
626+
]
627+
}
628+
629+
You can import and use this data in your #"diff-a2220159377c0de535d5b1a19b871634733fca70a11805935ab2867be27e8dac-590-630-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">
630+
631+
..code-block::javascript
632+
633+
// assets/controllers/user-list-controller.js
634+
importusersPromisefrom'../data/users.json';
635+
636+
asyncfunctiondisplayUsers() {
637+
constuserData=await usersPromise;
638+
639+
userData.users.forEach(user=> {
640+
console.log(`${user.name}:${user.email}`);
641+
});
642+
}
643+
644+
displayUsers();
645+
646+
How it Works
647+
~~~~~~~~~~~~
648+
649+
When you import a JSON file, AssetMapper:
650+
651+
1. **Detects the JSON import** in your JavaScript files during asset processing
652+
2. **Creates a JavaScript module** that exports a Promise resolving to the JSON content
653+
3. **Adds it to the importmap** so your browser can locate and load it correctly
654+
4. **Versions the file** like any other asset, ensuring proper cache busting
655+
656+
This approach works in all modern browsers without requiring native JSON import
657+
support, making it a reliable alternative to the newer ``with { type: 'json' }``
658+
syntax.
659+
660+
..note::
661+
662+
Like CSS imports, JSON imports are processed by AssetMapper and added to the
663+
importmap automatically. The imported JSON assets are also versioned, so any
664+
changes to the JSON content will result in a new versioned filename.
665+
591666
Issues and Debugging
592667
--------------------
593668

0 commit comments

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