Loop Through Nested Array in object

Question

I want to loop through this json file, and print the attendantName for each store. I am able to print the key and value, and I am able to print the first attendant in the arrays of attendants. But I need to print all the attendants in the array. I think I need a nested loop. How can I do this? This is what I have so far.

script.js

var data;
var request = new XMLHttpRequest();
request.open('GET', 'js/tender-total-data.json');
request.onreadystatechange = function () {
 if (request.status === 200 && request.readyState === 4) {
 data = JSON.parse(request.responseText);
 $.each(data.stores, function(key, val){
 console.log("The key is: ", key, "The value is; ", val);
 console.log("Attendant Name: ", (val.attendants[0].attendantName));
 console.log(val.storeId);
 })
 }
};
request.send();

tender-total-data.json

{
 "stores": [
 {
 "storeName": "Master Bistro",
 "storeId": "3046",
 "attendants": [
 {
 "attendantName": "Janis Joplin",
 "attendantId": "9784526",
 "total": 2000,
 "tenderTotal": {
 "Cash": 500,
 "TC": 0,
 "UOD": 500,
 "MC": 250,
 "VI": 250,
 "AX": 250,
 "DI": 250,
 "JC": 0,
 "DC": 0,
 "UOP": 0,
 "GN": 0,
 "UOGC": 0,
 "HOTEL": 0,
 "NCTNCG": 0
 }
 },
 {
 "attendantName": "David Bowie",
 "attendantId": "2589456",
 "total": 14675,
 "tenderTotal": {
 "Cash": 175,
 "TC": 0,
 "UOD": 100,
 "MC": 9500,
 "VI": 3500,
 "AX": 550,
 "DI": 850,
 "JC": 0,
 "DC": 0,
 "UOP": 0,
 "GN": 0,
 "UOGC": 0,
 "HOTEL": 0,
 "NCTNCG": 0
 }
 },
 {
 "attendantName": "Michael Jackson",
 "attendantId": "5478264",
 "total": 15599,
 "tenderTotal": {
 "Cash": 250,
 "TC": 0,
 "UOD": 80,
 "MC": 5624,
 "VI": 6895,
 "AX": 2500,
 "DI": 250,
 "JC": 0,
 "DC": 0,
 "UOP": 0,
 "GN": 0,
 "UOGC": 0,
 "HOTEL": 0,
 "NCTNCG": 0
 }
 }
 ],
 "message": "Store totals for 08/20/2018"
 },{
 "storeName": "The Master Marketplace",
 "storeId": "3047",
 "attendants": [
 {
 "attendantName": "Dirk Novitski",
 "attendantId": "9784527",
 "total": 2000,
 "tenderTotal": {
 "Cash": 500,
 "TC": 0,
 "UOD": 500,
 "MC": 250,
 "VI": 250,
 "AX": 250,
 "DI": 250,
 "JC": 0,
 "DC": 0,
 "UOP": 0,
 "GN": 0,
 "UOGC": 0,
 "HOTEL": 0,
 "NCTNCG": 0
 }
 },
 {
 "attendantName": "Carmello Anthony",
 "attendantId": "2589458",
 "total": 14675,
 "tenderTotal": {
 "Cash": 175,
 "TC": 0,
 "UOD": 100,
 "MC": 9500,
 "VI": 3500,
 "AX": 550,
 "DI": 850,
 "JC": 0,
 "DC": 0,
 "UOP": 0,
 "GN": 0,
 "UOGC": 0,
 "HOTEL": 0,
 "NCTNCG": 0
 }
 },
 {
 "attendantName": "Stevie Wonder",
 "attendantId": "5478266",
 "total": 15599,
 "tenderTotal": {
 "Cash": 250,
 "TC": 0,
 "UOD": 80,
 "MC": 5624,
 "VI": 6895,
 "AX": 2500,
 "DI": 250,
 "JC": 0,
 "DC": 0,
 "UOP": 0,
 "GN": 0,
 "UOGC": 0,
 "HOTEL": 0,
 "NCTNCG": 0
 }
 }
 ],
 "message": "Store totals for 08/22/2018"
 }
 ] 
}

Thanks I appreciate your assistance.

Answer 1

You are right, you need another loop, but you can make it a little easier with .forEach:

var data;
var request = new XMLHttpRequest();
request.open('GET', 'js/tender-total-data.json');
request.onreadystatechange = function () {
 if (request.status === 200 && request.readyState === 4) {
 data = JSON.parse(request.responseText);
 data.stores.forEach(function(key, val){
 console.log("The key is: ", key, "The value is; ", val);
 val.attendants.forEach(a => console.log("Attendant Name: ",a.attendantName));
 console.log(val.storeId);
 })
 }
};
request.send();

• Barmar: Why not use .forEach for the outer loop, too?
• user9541762: Perfect. Thank you Luca!
• Derek 朕會功夫: You can also use a for...of loop.
• Luca Kiebel: Yes, all of them are viable options, since you don't seem to use jquery anywhere else, using $.each isn't needed.

Answer 2

One forEach to iterate stores and the second inside to iterate attendants

var data = {
 stores: [
 {
 storeName: "Master Bistro",
 storeId: "3046",
 attendants: [
 {
 attendantName: "Janis Joplin",
 attendantId: "9784526",
 total: 2000,
 tenderTotal: {
 Cash: 500,
 TC: 0,
 UOD: 500,
 MC: 250,
 VI: 250,
 AX: 250,
 DI: 250,
 JC: 0,
 DC: 0,
 UOP: 0,
 GN: 0,
 UOGC: 0,
 HOTEL: 0,
 NCTNCG: 0
 }
 },
 {
 attendantName: "David Bowie",
 attendantId: "2589456",
 total: 14675,
 tenderTotal: {
 Cash: 175,
 TC: 0,
 UOD: 100,
 MC: 9500,
 VI: 3500,
 AX: 550,
 DI: 850,
 JC: 0,
 DC: 0,
 UOP: 0,
 GN: 0,
 UOGC: 0,
 HOTEL: 0,
 NCTNCG: 0
 }
 },
 {
 attendantName: "Michael Jackson",
 attendantId: "5478264",
 total: 15599,
 tenderTotal: {
 Cash: 250,
 TC: 0,
 UOD: 80,
 MC: 5624,
 VI: 6895,
 AX: 2500,
 DI: 250,
 JC: 0,
 DC: 0,
 UOP: 0,
 GN: 0,
 UOGC: 0,
 HOTEL: 0,
 NCTNCG: 0
 }
 }
 ],
 message: "Store totals for 08/20/2018"
 },
 {
 storeName: "The Master Marketplace",
 storeId: "3047",
 attendants: [
 {
 attendantName: "Dirk Novitski",
 attendantId: "9784527",
 total: 2000,
 tenderTotal: {
 Cash: 500,
 TC: 0,
 UOD: 500,
 MC: 250,
 VI: 250,
 AX: 250,
 DI: 250,
 JC: 0,
 DC: 0,
 UOP: 0,
 GN: 0,
 UOGC: 0,
 HOTEL: 0,
 NCTNCG: 0
 }
 },
 {
 attendantName: "Carmello Anthony",
 attendantId: "2589458",
 total: 14675,
 tenderTotal: {
 Cash: 175,
 TC: 0,
 UOD: 100,
 MC: 9500,
 VI: 3500,
 AX: 550,
 DI: 850,
 JC: 0,
 DC: 0,
 UOP: 0,
 GN: 0,
 UOGC: 0,
 HOTEL: 0,
 NCTNCG: 0
 }
 },
 {
 attendantName: "Stevie Wonder",
 attendantId: "5478266",
 total: 15599,
 tenderTotal: {
 Cash: 250,
 TC: 0,
 UOD: 80,
 MC: 5624,
 VI: 6895,
 AX: 2500,
 DI: 250,
 JC: 0,
 DC: 0,
 UOP: 0,
 GN: 0,
 UOGC: 0,
 HOTEL: 0,
 NCTNCG: 0
 }
 }
 ],
 message: "Store totals for 08/22/2018"
 }
 ]
};
data.stores.forEach(o => {
 o.attendants.forEach(n => console.log(n.attendantName));
});