如何在循环中访问本地发送的 JSON

Question

我正在尝试访问本地保存的 .json 文件，之后我想循环访问该文件。 这是gutscheinDB.json 文件：

{
"gutscheinData": [
    {  "qrCode": "Esteban Gutierez",
        "startDate": "01.01.2016",
        "expireDate": "01.01.2020",
        "JsBarcode": "2345532342324",
        "text": "Gutschein für Autowäsche",
        "value": "5€"
    }, 
    {
        "qrCode": "Ronaldo Keita",
        "startDate": "01.01.2017",
        "expireDate": "01.01.2025",
        "JsBarcode": "2345532342888",
        "text": "Gutschein für Tanken",
        "value": "50€"
    }

]



}

这里是gutschein.js 文件：

var gutscheine=[];

function loadJSON(callback) {
var xobj = new XMLHttpRequest();
 xobj.overrideMimeType("application/json");
 xobj.open('GET', 'http://localhost:8080/src/js/gutscheinDB.Json', true);
 xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
  callback(JSON.parse(xobj.responseText));
}
};
 xobj.send(null);
}
loadJSON(function (json) {
   console.log(json); // this will log out the json object
  gutscheine.push(json);
 });

然后我想循环遍历gutschein 数组

 for (var i in gutscheine.gutscheinData) { 

for (gutscheine.gutscheinData[i] in gutscheine.gutscheinData[i].qrCode) {

var j =gutscheine.gutscheinData[i].qrCode; 
console.log(j);
 }
 i ++;
}

我尝试并删除了我在 StackOverflow 和 w3 上找到的许多变体，但没有任何效果。 我无法访问每个对象的二维码。 在 Chrome 控制台中，我可以看到具有所有值的 >[] 数组和具有所有值的 jsonObject，但我无法像这样访问它们：

   gutscheine.gutscheinData[0].qrCode;

Answer 1

好吧，这就是我为使它工作所做的工作......（我猜这是一种非常愚蠢的方法）

var gutscheine;

function loadJSON(callback) {
 var xobj = new XMLHttpRequest();
 xobj.overrideMimeType("application/json");
 xobj.open('GET', 'http://localhost:8080/src/js/gutscheinDB.Json', true);
 xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
  callback(JSON.parse(xobj.responseText));
}
 };
 xobj.send(null);
}
loadJSON(function (vouchers) {
 console.log(vouchers); // this will log out the json object
 gutscheine=vouchers;
 console.log(gutscheine.gutscheinData[0].qrCode);
 var cardQr=gutscheine.gutscheinData[0].qrCode;
 console.log(cardQr);
 for(var i = 0;i < gutscheine.gutscheinData.length;i++){
 var cardQrcode = gutscheine.gutscheinData[i].qrCode;
  var cardStartDate = gutscheine.gutscheinData[i].startDate;
  var cardExpireDate = gutscheine.gutscheinData[i].expireDate;
 var cardJSBarcode = gutscheine.gutscheinData[i].JsBarcode;
  var cardText = gutscheine.gutscheinData[i].text;
  var cardValue = gutscheine.gutscheinData[i].value; 



console.log(cardQrcode+cardStartDate+cardExpireDate+
   cardJSBarcode+cardText+cardText+cardValue);
     }
     });

结果：

罗纳尔多·凯塔01.01.201701.01.20252345532342888Gutschein für TankenGutschein für Tanken50€

Answer 2

解释

为了简单起见，我决定使用一个只使用一些回调的函数，来简单地模拟ajax 调用，这里没什么太复杂的。

如您所见，为了减少代码中的副作用数量，我使用了map，为了简单起见，我还在handlObject 函数中使用了forEach 函数.如果你想进一步减少副作用的数量，你可以考虑使用reduce等。

您可以清楚地看到，在这个解决方案中，它包含一些函数来请求数据、循环数据、处理每个单独的对象以及一些在其他所有操作完成后将运行的函数，即 onComplete。

编辑

您的代码不起作用的原因归结为几个事实，其中一个原因很简单，即您打算在对象上使用for (... in...) 循环来迭代对象属性。当您尝试在数组上执行此操作时，您将无法获得所需的行为，而是需要使用传统的 for 循环，或者像我使用 forEach 或 @987654329 所做的那样@方法。

如果您不必担心副作用，您可能希望使用 forEach 而不是 map，但是 IMO 没有副作用的代码非常简洁，因此是我的实现风格。

正如@George 在 cmets 中提到的那样，您希望通过使用 0 的索引来访问对象属性，因为gutscheine 是一个只有一个索引的数组。然后你可以像这样访问gutscheinData：

gutscheine[0].gutscheinData[0].qrCode;

如果您不喜欢该语法，您可以始终将其设置为 gutscheine 是一个对象而不是数组，这样就无需使用上述语法等。

// Simulate ajax request.
const getData = callback => {
  const data = {
    "gutscheinData": [{
        "qrCode": "Esteban Gutierez",
        "startDate": "01.01.2016",
        "expireDate": "01.01.2020",
        "JsBarcode": "2345532342324",
        "text": "Gutschein für Autowäsche",
        "value": "5€"
      },
      {
        "qrCode": "Ronaldo Keita",
        "startDate": "01.01.2017",
        "expireDate": "01.01.2025",
        "JsBarcode": "2345532342888",
        "text": "Gutschein für Tanken",
        "value": "50€"
      }
    ]
  };

  if (typeof callback == 'function') {
    return callback(data);
  } else {
    return data;
  }
};

// Handle each object.
const handleObject = obj => {
  Object.keys(obj).forEach(key => console.log(key, obj[key]));

  // Do something, this just returns the value and text properties. 
  const copy = { ...obj};
  return { value: copy.value, text: copy.text };
};

// Just a function to run at the end of everything. 
const onComplete = data => {
  console.log(data);
};

// A simple function to generate an 
// array from the data object's 'gutscheinData' property, then
// pass 'z' array into the 'onComplete' function 
const loop = data => onComplete(data.gutscheinData.map(obj => handleObject(obj)));

// Start the functionality. 
getData(loop);