Accessing Static Resource Contents from Lightning JS Controller

You can get the data with a simple HTTP request:

({ init: function(component, event, helper) { var path = $A.get("$Resource.StaticResourceName"); var req = new XMLHttpRequest();"GET", path); req.addEventListener("load", $A.getCallback(function() { component.set("v.attribute", req.response); })); req.send(null); } }) 

I would like to share an alternative approach by using Fetch API (MDN web docs)

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

For making a request and fetching a resource, use the WindowOrWorkerGlobalScope.fetch() method. It is implemented in multiple interfaces, specifically Window and WorkerGlobalScope. This makes it available in pretty much any context you might want to fetch resources in.

So, you can get the content of your JSON file from the static resource next way:

{( onInit: function (component, event, helper) { const url = new URL(window.location.href); const resourceRelPath = $A.get('$Resource.StaticResourceName'); const resourceUrl = `${url.origin}${resourceRelPath}`; window.fetch(resourceUrl) .then($A.getCallback((response) => { if (!response.ok) { throw new Error(`HTTP error, status = ${response.status}`); } response.json() .then($A.getCallback((data) => { component.set('v.yourAttribute', data); })); })) .catch($A.getCallback((error) => { console.error('Fetch Error :-S', error); })); }, )}; 

Or you can query it via Apex Controller:

public with sharing class StaticResourceController { @AuraEnabled public static String getStaticResContentByName(String name) { Blob jsonContentAsBlob = [ SELECT Body FROM StaticResource WHERE Name = :name ].Body; return jsonContentAsBlob.toString(); }; 

PS. Using this approach don’t forget to parse a response body using JSON.parse() function within Lightning Controller.