4

The platformResourceLoader module only offers loadScript and loadStyle. Is there a way to load JSON files from a zip Static Resource?

3

You can use a simple XMLHttpRequest:

import MYJSON from '@salesforce/resourceUrl/myjsonfile';

...

var xhr = new XMLHttpRequest();
xhr.open("GET", MYJSON);
xhr.onload = () => this.data = xhr.responseText;
xhr.send(null);
2

You can put your JSON file in a Javascript file. An example is shown below. I created a file called test.js and uploaded to static resource with name test

"use strict"

window.myObj = {
"colors": [
  {
    "color": "black",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [255,255,255,1],
      "hex": "#000"
    }
  },
  {
    "color": "white",
    "category": "value",
    "code": {
      "rgba": [0,0,0,1],
      "hex": "#FFF"
    }
  },
  {
    "color": "red",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [255,0,0,1],
      "hex": "#FF0"
    }
  },
  {
    "color": "blue",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [0,0,255,1],
      "hex": "#00F"
    }
  },
  {
    "color": "yellow",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [255,255,0,1],
      "hex": "#FF0"
    }
  },
  {
    "color": "green",
    "category": "hue",
    "type": "secondary",
    "code": {
      "rgba": [0,255,0,1],
      "hex": "#0F0"
     }
   },
  ]
};

You can now load this JSON into webcomponent using platformResourceLoader as below

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import testlib from '@salesforce/resourceUrl/testjs';


export default class Testcmp extends LightningElement {

libInitialized = false;

renderedCallback() {
    if (this.libInitialized) {
        return;
    }
    this.d3Initialized = true;

    loadScript(this, testlib).then(() => { 
        console.log(window.myObj);
    });
  }
}

Note that there is also another way to do this is by using a service component only to hold data export it as Javascript function.

5
  • You could, but complicated :p
    – sfdcfox
    Apr 16 '20 at 4:27
  • What advantage an xmlhttprequest has over wrapping as js object ? Apr 16 '20 at 4:30
  • The main point, I guess, is that you can load any static resource you want (image, json, csv, etc). Also, you don't need to remember to add more code to the file, you can use it as is. There's nothing wrong with this answer, it's just unnecessary to go through the extra steps.
    – sfdcfox
    Apr 16 '20 at 4:36
  • Got it! That makes sense!! Apr 16 '20 at 4:39
  • That's a creative hack! Although in real-life it's not always possible to do the required prep work (wrapping Javascript around JSON).
    – Mossi
    Apr 16 '20 at 18:02
2

I favor using fetch over XMLHttpRequest since fetch allows to work with Promises easily.

import MYJSON from '@salesforce/resourceUrl/myjsonfile';
  connectedCallback() {
    fetch(MYJSON)
      .then((response) => response.json())
      .then((data) => console.log(data));
  }


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.