Thanks for your reply.
I know the reason. It is related to issue on trying to load from a local JSON file using asynchronous call. Whatever method I used : jQuery Ajax (including its convenient methods such as $get(), $getJSON()), traditional XHR and modern Fetch API, it all failed. I have recently read in StackOverflow where this issue has been addressed. A few guys gave good explanations about this issue. It seems that it is impossible to load from a local JSON, as AJAX call doesn’t support file:/// protocol.
So, after researching, I turned to use a site named myjson.com which provides storage for json data. I created json files there, and from there, I load them into my component. It worked.
However, I realized that in real application, I would not use local json files. Instead, I will be calling a php script that generates a string with json format. So, I tried it in my test app, and it worked well.
For now, I will defer my intention of loading from a local json file, because it’s most likely that this case won’t be encountered in my real project.