javascript - 如何使用异步 foreach 遍历 json 数据？

Question

我有一个基本的 json 对象，如下所示，它跟踪与我的应用程序相关的信息。我有一个保存为字符串的 Blob URL，我需要使用 FileReader API 访问并转换为 base64 字符串。

我之前尝试过使用 for 循环，并且在大多数情况下效果很好。但最大的问题是 FileReader 逻辑是异步的，每次 for 循环运行时，FileReader 似乎都被完全跳过导致值变为undefined.

我听说 foreach 方法在运行异步函数时可能会产生更好的结果，所以我决定试一试。但我不确定如何引用数组中的特定字段。我需要执行两次循环，一次用于“mask_b64”，然后一次用于“spr_b64”，以将base64字符串绑定到数组并导出/下载json字符串。

{
  "objects": {
    "0": [
      {
        "name": "ads",
        "mask_b64": "none",
        "mask_offset_x": 0,
        "mask_offset_y": 0
      }
    ],
  }, 
  "sprites": {
    "0": [
      {
        "name": "RunNew",
        "basename": "RunNew_strip10.png",
        "spr_b64": "blob:https://mywebsite.net/e417be39-48a1-4feb-889b-fbbb73279f02",
        "frames": 10,
        "spr_offset_x": -1,
        "spr_offset_y": -1,
        "spr_speed": 0
      }
    ]
  }
} 

这是我的其他脚本，包括文件阅读器

changeBlobToBase64(temp_json_text.sprites[0])

function changeBlobToBase64(jsonArray) 
  {
  for (i = 0; i<=(jsonArray.length)-1;i++)
    {
    var blob_url = jsonArray[i]['spr_b64'];
    var new_image = blobToBase64(blob_url);

    console.log(new_image);

    jsonArray[i]['spr_b64'] = new_image;
    }
  }

我的 FileReader 脚本

function blobToBase64(imgUrl) 
  {
  var str_to_return;

  var request = new XMLHttpRequest();
  request.open('GET', imgUrl, true);
  request.responseType = 'blob';
  request.onload = function() 
    {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);

    reader.onload =  function(e)
      {
      str_to_return = e.target.result;
      return str_to_return;
      alert(str_to_return)
      }
    };
  request.send();
  } 

标签： javascriptjson