How can i repeat in an array in Javascript?

Question

I have a simple question but it's difficult to explain it..Please help me!! I have a script in a JsFiddle:

https://jsfiddle.net/irinikonsta/b4t9hspj/

In this script, the program reads a simple txt (with coordinates and an id for each pair of coordinates) and it transforms into an array. After that, it begins a repeat for each pair of coordinates: ( text["features"].forEach(function(feature) {....)

In this repeat, it is calculated a simple sky's percentage. This sky's percentage is the varriable "per". I want this varriable "per" to be saved in a varriable "z" in the array's attributes. This varriable z exists if you go to the console->object->features->0->attributes. But if you see in the 0 point,1 point,etc this varriable doesn't change according to its coordinates. Do you know why? i attach to you the txt file because you have to upload it from your own. Please help me its very important..Thank you so much have a nice day! The txt file:

{
"displayFieldName": "",
"fieldAliases": {
    "FID": "FID",
    "Id": "Id",
    "Longtitude": "Longtitude",
    "Latitude": "Latitude"
},
"geometryType": "esriGeometryPoint",
"spatialReference": {
    "wkid": 4326,
    "latestWkid": 4326
},
"fields": [{
    "name": "FID",
    "type": "esriFieldTypeOID",
    "alias": "FID"
}, {
    "name": "Id",
    "type": "esriFieldTypeInteger",
    "alias": "Id"
}, {
    "name": "Longtitude",
    "type": "esriFieldTypeDouble",
    "alias": "Longtitude"
}, {
    "name": "Latitude",
    "type": "esriFieldTypeDouble",
    "alias": "Latitude"
}],
"features": [{
    "attributes": {
        "FID": 0,
        "Id": 1,
        "Longtitude": 23.739000000000001,
        "Latitude": 37.972000000000001
    },
    "geometry": {
        "x": 23.739000000000001,
        "y": 37.972000000000001
    }
}, {
    "attributes": {
        "FID": 1,
        "Id": 2,
        "Longtitude": 23.760100000000001,
        "Latitude": 37.984999999999999
    },
    "geometry": {
        "x": 23.760100000000001,
        "y": 37.984999999999999
    }
}, {
    "attributes": {
        "FID": 2,
        "Id": 3,
        "Longtitude": 23.749199999999998,
        "Latitude": 37.975999999999999
    },
    "geometry": {
        "x": 23.749199999999998,
        "y": 37.975999999999999
    }
}, {
    "attributes": {
        "FID": 3,
        "Id": 4,
        "Longtitude": 23.735700000000001,
        "Latitude": 37.975999999999999
    },
    "geometry": {
        "x": 23.735700000000001,
        "y": 37.975999999999999
    }
}]
}

Answer 1

The first problem you need to understand, is that you want to run an asynchronous operation (the download of the image from gmaps) inside a synchronous operation (forEach). You can achieve this with various ways, in my code I used callbacks, the logic is that I run the async operations in parallel and when each one completes I get the result and put it in the array.

But the main problem is that somehow your data is wrong. All the links that you created are pointing in that image. Yeah no image...

The coordinates you have are pointing in the middle of the sea! Check for your self

But if you swap them with

let y = feature["attributes"].Longtitude; let x = feature["attributes"].Latitude;

Now these coordinates point to the middle of Athens :)

function getBase64FromImageUrl(url, callback) {
  var img = new Image();
  var range = 60;
  var finalZ;
  img.setAttribute('crossOrigin', 'anonymous');

  img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);


    //console.log("imageData",imageData);
    //var dataURL = canvas.toDataURL("image/png");
    var index = (150 * imageData.width + 150) * 4;
    var red = imageData.data[index];
    var green = imageData.data[index + 1];
    var blue = imageData.data[index + 2];
    var alpha = imageData.data[index + 3];
    console.log(red);
    console.log(green);
    console.log(blue);
    var rangedRB = red - range;
    var rangedGB = green - range;
    var rangedBB = blue - range;

    var rangedRT = red + range;
    var rangedGT = green + range;
    var rangedBT = blue + range;

    var data = imageData.data;
    var counter = 0;
    for (var i = 0; i < data.length; i += 4) {
      var red1 = data[i];
      var green1 = data[i + 1];
      var blue1 = data[i + 2];
      if ((red1 < rangedRT && red1 > rangedRB) && (green1 < rangedGT && green1 > rangedGB) && (blue1 < rangedBT && blue1 > rangedBB)) {
        counter = counter + 1;
        var p = data.length / 4;
        var pe = counter / p;
        var per = pe * 100;
        finalZ = per;
      }
    }
    console.log(url);
    console.log("counterFinal", counter);
    console.log("data.length", data.length / 4);
    console.log("percentage:", (counter / (data.length / 4)) * 100);

    //console.log(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    // alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    callback(finalZ);
  };

  img.src = url;
}

function openFile(event) {
  console.log('openfile', event);
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    var text = JSON.parse(reader.result);
    console.log(reader.result.substring(0, 200));

    var results = 0;
    text["features"].forEach(function(feature) {

      //y is the Longtitude
      //x is the Latitude
      //because data are wrong!
      let y = feature["attributes"].Longtitude;
      let x = feature["attributes"].Latitude;

      let myString1 = `https://maps.googleapis.com/maps/api/streetview?location=${x},${y}&size=300x300&pitch=90`;
      getBase64FromImageUrl(myString1, function(finalZ) {
        feature["attributes"].z = finalZ;
        results++;
        if (results == text["features"].length) {
          console.log(text);
        }
      });



    });


  };
  reader.readAsText(input.files[0]);
}

<input type='file' accept='text/plain' onchange='openFile(event)'>
<br>
<img id='output'>