Pass keys of JSON in a function

Question

I've not a big familiarity with JavaScript. My aims is to pass one or more values in a function for read a JSON. When I use the code below I see this error:

ReferenceError: json is not defined

let vectorsLayerAPI = function(
  vectorType,
  urlAPI,
  vectorsLayerName
){
  this.vectorType = vectorType;
  this.urlAPI = urlAPI;
  this.vectorsLayerName = vectorsLayerName;

  let layerVectorAPI;

  return {
    'createVectorAPI': function(
      attr,
    ){
      this.attr = attr;
      // Build the vector
      layerVector = new ol.layer.Vector({
        title: vectorsLayerName,
        source: new ol.source.Vector(),
      });
      async function getFeatureProperties() {
        try {
          let response = await fetch(urlAPI);
          if (!response.ok) {
            throw new Error(`HTTP error!\n Status: ${response.status}\n Type: ${response.type}\n URL: ${response.url}`);
          } else {
            let data = await response.text();
            if (attr !== null) {
              console.log(attr);
              let json = JSON.parse(data)[attr];
            } else {
              console.log(attr);
              let json = JSON.parse(data)
            }
            const features = new ol.format.GeoJSON({
              dataProjection: 'EPSG:4326',
              featureProjection: 'EPSG:3857'
            }).readFeatures(json);
            layerVector.getSource().addFeatures(features);
          }
        } catch (e) {
          console.log(e);
        }
      }
      getFeatureProperties();

      return layerVector;
    },
  };
};

But I haven't problem when I use this code:

let vectorsLayerAPI = function(
  vectorType,
  urlAPI,
  vectorsLayerName
){
  this.vectorType = vectorType;
  this.urlAPI = urlAPI;
  this.vectorsLayerName = vectorsLayerName;

  let layerVectorAPI;

  return {
    'createVectorAPI': function(){
      // Build the vector
      layerVector = new ol.layer.Vector({
        title: vectorsLayerName,
        source: new ol.source.Vector(),
      });
      async function getFeatureProperties() {
        try {
          let response = await fetch(urlAPI);
          if (!response.ok) {
            throw new Error(`HTTP error!\n Status: ${response.status}\n Type: ${response.type}\n URL: ${response.url}`);
          } else {
            let data = await response.text();
            let json = JSON.parse(data)["stop_point"];
            const features = new ol.format.GeoJSON({
              dataProjection: 'EPSG:4326',
              featureProjection: 'EPSG:3857'
            }).readFeatures(json);
            layerVector.getSource().addFeatures(features);
          }
        } catch (e) {
          console.log(e);
        }
      }
      getFeatureProperties();

      return layerVector;
    },
  };
};

This snippets are based on OpenLayers 6 with which I'm developing my custom library.

score 1 · Accepted Answer · answered Aug 26 '21 at 07:02

In your code you are declaring json variable inside if block.

            if (attr !== null) {
              console.log(attr);
              let json = JSON.parse(data)[attr];
            } else {
              console.log(attr);
              let json = JSON.parse(data)
            }

And then you are trying to use it outside if.

That's the reason you are getting the error.

Please improve your code like this:

let data = await response.text();
            let json;
            if (attr !== null) {
              console.log(attr);
              json = JSON.parse(data)[attr];
            } else {
              console.log(attr);
              json = JSON.parse(data)
            }

Pass keys of JSON in a function

1 Answers1