(object) looping creation

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    zing-grid[loading] {
      height: 800px;
    }
  </style>
</head>

<body>
  <div id="yourFirstGrid"></div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      const GridConfig = (data) => {
        return {
          editor: true,
          pager: true,
          pageSize: 3,
          data
        }
      }

      const dbDocument = [{
          data: [
            [
              "Maria",
              123
            ],
            [
              "David",
              456
            ],
            [
              "Felicity",
              789
            ]
          ]
        },

        {
          data: [{
              "name": "Maria",
              "number": 123
            },
            {
              "name": "David",
              "number": 456
            },
            {
              "name": "Felicity",
              "number": 789
            }
          ]
        },

        {
          data: {
            "entry1": {
              "name": "Maria",
              "number": 123
            },
            "entry2": {
              "name": "David",
              "number": 456
            },
            "entry3": {
              "name": "Felicity",
              "number": 789
            }
          }
        },

        {
          data: [{
              "name": "Maria",
              "number": 123,
              "colors": {
                "primary": "red",
                "secondary": "chartreuse"
              }
            },
            {
              "name": "David",
              "number": 456,
              "colors": {
                "primary": "black",
                "secondary": "yellow"
              }
            },
            {
              "name": "Felicity",
              "number": 789,
              "colors": {
                "primary": "blue",
                "secondary": "orange"
              }
            }
          ]
        }
      ];

      // loop through database object
      dbDocument.forEach((curVal) => {
        const gridConfig = GridConfig(curVal.data);
        const gridRef = new ZingGrid(gridConfig);
        document.querySelector('#yourFirstGrid').appendChild(gridRef)
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>
  <div id="yourFirstGrid"></div>
</body>

</html>

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  const GridConfig = (data) => {
    return {
      editor: true,
      pager: true,
      pageSize: 3,
      data
    }
  }

  const dbDocument = [{
      data: [
        [
          "Maria",
          123
        ],
        [
          "David",
          456
        ],
        [
          "Felicity",
          789
        ]
      ]
    },

    {
      data: [{
          "name": "Maria",
          "number": 123
        },
        {
          "name": "David",
          "number": 456
        },
        {
          "name": "Felicity",
          "number": 789
        }
      ]
    },

    {
      data: {
        "entry1": {
          "name": "Maria",
          "number": 123
        },
        "entry2": {
          "name": "David",
          "number": 456
        },
        "entry3": {
          "name": "Felicity",
          "number": 789
        }
      }
    },

    {
      data: [{
          "name": "Maria",
          "number": 123,
          "colors": {
            "primary": "red",
            "secondary": "chartreuse"
          }
        },
        {
          "name": "David",
          "number": 456,
          "colors": {
            "primary": "black",
            "secondary": "yellow"
          }
        },
        {
          "name": "Felicity",
          "number": 789,
          "colors": {
            "primary": "blue",
            "secondary": "orange"
          }
        }
      ]
    }
  ];

  // loop through database object
  dbDocument.forEach((curVal) => {
    const gridConfig = GridConfig(curVal.data);
    const gridRef = new ZingGrid(gridConfig);
    document.querySelector('#yourFirstGrid').appendChild(gridRef)
  });
});