循环遍历对象中的嵌套数组答案

【问题标题】：Loop Through Nested Array in object循环遍历对象中的嵌套数组
【发布时间】：2018-08-29 17:56:00
【问题描述】：

我想遍历这个 json 文件，并为每个商店打印 attendantName。我能够打印键和值，并且能够打印服务员数组中的第一个服务员。但我需要打印数组中的所有服务员。我想我需要一个嵌套循环。我怎样才能做到这一点？这就是我到目前为止所拥有的。

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"
        }
    ]    
}

感谢您的帮助。

【问题讨论】：

标签： javascript jquery arrays json loops

【解决方案1】：

你是对的，你需要另一个循环，但你可以使用.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();

【讨论】：

为什么不在外部循环中也使用.forEach？
完美。谢谢你卢卡！
你也可以使用for...of循环。
是的，所有这些都是可行的选择，因为您似乎没有在其他任何地方使用 jquery，因此不需要使用 $.each。

【解决方案2】：

一个forEach 迭代stores 和第二个内部迭代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));
});

【讨论】：