解释

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上发现的许多变体，但没有任何效果。我无法访问每个对象的QR码。在Chrome控制台中，我可以看到包含所有值的> []数组和具有所有值的jsonObject，但是我无法像这样访问它们：

   gutscheine.gutscheinData[0].qrCode;

Answer 1

解释

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

如您所见，为了减少代码中的副作用，我使用了map，为简单起见，我还使用了forEach函数。 handlObject功能。如果您想进一步减少副作用的数量，可以考虑使用reduce之类的东西。

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

编辑

代码无法正常工作的原因有两个，一个简单的事实是您打算在对象上使用for (... in...)循环来遍历对象属性。当您尝试在数组上执行此操作时，您将无法获得所需的行为，而是需要使用传统的for循环，或者像我对forEach所做的那样map方法。

如果您不需要担心副作用，那么您想使用forEach而不是map，但是IMO具有无副作用的代码非常简洁，因此我的实现方式。

因此，正如@George在评论中提到的那样，您希望通过使用索引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);

Answer 2

好的，这就是我所做的工作……（猜想这是一种很笨拙的方法）

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);
     }
     });

结果：

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

2 个答案:

解释

编辑

罗纳尔多·凯塔（Ronaldo Keita）01.01.201701.01.20252345532342888GutscheinfürTankenGutscheinfürTanken50€