Как получить доступ к локальному 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 Array

 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

хорошо, вот что я сделал, чтобы заставить это работать ... (думаю, это очень нубистский подход)

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ürTankenGutschein für Tanken50 €

Answer 2

Объяснено

Ради простоты я решил использовать функцию, которая просто использует некоторый обратный вызов, чтобы просто имитировать вызов 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);