Loop through JavaScript Array of Objects and Display the data in HTML Table

Hello software devs!

Today we are going to do a simple JavaScript exercise. We are going to loop through an array of objects and display the result in a HTML table. We are going to use an array of Nigerian states, capitals, local government areas, longitude, latitude and display select data on the table.

Here’s the data:

const states = [
{
"code": "FC",
"name": "Abuja",
"capital": "",
"lat": "8.831122799397733",
"long":"7.172467300000001",
"lgas": [
"Abuja",
"Kwali",
"Kuje",
"Gwagwalada",
"Bwari",
"Abaji"
]
},
{
"code": "AB",
"name": "Abia",
"capital": "Umuahia",
"lat": "5.45409529947607",
"long":"7.5153071",
"lgas": [
"Aba North",
"Aba South",
"Arochukwu",
"Bende",
"Ikawuno",
"Ikwuano",
"Isiala-Ngwa North",
"Isiala-Ngwa South",
"Isuikwuato",
"Umu Nneochi",
"Obi Ngwa",
"Obioma Ngwa",
"Ohafia",
"Ohaozara",
"Osisioma",
"Ugwunagbo",
"Ukwa West",
"Ukwa East",
"Umuahia North",
"Umuahia South"
]
},
{
"code": "AD",
"name": "Adamawa",
"capital": "Yola",
"lat": "9.512977199417053",
"long":"12.388188699999999",
"lgas": [
"Demsa",
"Fufore",
"Ganye",
"Girei",
"Gombi",
"Guyuk",
"Hong",
"Jada",
"Lamurde",
"Madagali",
"Maiha",
"Mayo-Belwa",
"Michika",
"Mubi-North",
"Mubi-South",
"Numan",
"Shelleng",
"Song",
"Toungo",
"Yola North",
"Yola South"
]
},
{
"code": "AK",
"name": "AkwaIbom",
"capital": "Uyo",
"lat": "4.940863799511036",
"long":"7.8412267",
"lgas": [
"Abak",
"Eastern-Obolo",
"Eket",
"Esit-Eket",
"Essien-Udim",
"Etim-Ekpo",
"Etinan",
"Ibeno",
"Ibesikpo-Asutan",
"Ibiono-Ibom",
"Ika",
"Ikono",
"Ikot-Abasi",
"Ikot-Ekpene",
"Ini",
"Itu",
"Mbo",
"Mkpat-Enin",
"Nsit-Atai",
"Nsit-Ibom",
"Nsit-Ubium",
"Obot-Akara",
"Okobo",
"Onna",
"Oron",
"Oruk Anam",
"Udung-Uko",
"Ukanafun",
"Urue-Offong/Oruko",
"Uruan",
"Uyo"
]
},
{
"code": "AN",
"name": "Anambra",
"capital": "Awka",
"lat": "6.2183135994341985",
"long":"6.9531842",
"lgas": [
"Aguata",
"Anambra East",
"Anambra West",
"Anaocha",
"Awka North",
"Awka South",
"Ayamelum",
"Dunukofia",
"Ekwusigo",
"Idemili-North",
"Idemili-South",
"Ihiala",
"Njikoka",
"Nnewi-North",
"Nnewi-South",
"Ogbaru",
"Onitsha-North",
"Onitsha-South",
"Orumba-North",
"Orumba-South"
]
},
{
"code": "BA",
"name": "Bauchi",
"capital": "Bauchi",
"lat": "10.622828399473097",
"long":"10.028775399999999",
"lgas": [
"Alkaleri",
"Bauchi",
"Bogoro",
"Damban",
"Darazo",
"Dass",
"Gamawa",
"Ganjuwa",
"Giade",
"Itas Gadau",
"Jama'Are",
"Katagum",
"Kirfi",
"Misau",
"Ningi",
"Shira",
"Tafawa-Balewa",
"Toro",
"Warji",
"Zaki"
]
},
{
"code": "BY",
"name": "Bayelsa",
"capital": "Yenagoa",
"lat": "4.762978599524332",
"long":"6.028898",
"lgas": [
"Brass",
"Ekeremor",
"Kolokuma Opokuma",
"Nembe",
"Ogbia",
"Sagbama",
"Southern-Ijaw",
"Yenagoa"
]
},
{
"code": "BE",
"name": "Benue",
"capital": "Makurdi",
"lat": "7.35057469939717",
"long":"8.777287699999999",
"lgas": [
"Ado",
"Agatu",
"Apa",
"Buruku",
"Gboko",
"Guma",
"Gwer-East",
"Gwer-West",
"Katsina-Ala",
"Konshisha",
"Kwande",
"Logo",
"Makurdi",
"Ogbadibo",
"Ohimini",
"Oju",
"Okpokwu",
"Otukpo",
"Tarka",
"Ukum",
"Ushongo",
"Vandeikya"
]
},
{
"code": "BO",
"name": "Borno",
"capital": "Maiduguri",
"lat": "12.18753919959776",
"long":"13.308003399999999",
"lgas": [
"Abadam",
"Askira-Uba",
"Bama",
"Bayo",
"Biu",
"Chibok",
"Damboa",
"Dikwa",
"Gubio",
"Guzamala",
"Gwoza",
"Hawul",
"Jere",
"Kaga",
"Kala Balge",
"Konduga",
"Kukawa",
"Kwaya-Kusar",
"Mafa",
"Magumeri",
"Maiduguri",
"Marte",
"Mobbar",
"Monguno",
"Ngala",
"Nganzai",
"Shani"
]
},
{
"code": "CR",
"name": "CrossRiver",
"capital": "Calabar",
"lat": "5.867196599451846",
"long":"8.5204774",
"lgas": [
"Abi",
"Akamkpa",
"Akpabuyo",
"Bakassi",
"Bekwarra",
"Biase",
"Boki",
"Calabar-Municipal",
"Calabar-South",
"Etung",
"Ikom",
"Obanliku",
"Obubra",
"Obudu",
"Odukpani",
"Ogoja",
"Yakurr",
"Yala"
]
},
{
"code": "DE",
"name": "Delta",
"capital": "Asaba",
"lat": "5.527306099471514",
"long":"6.178416699999999",
"lgas": [
"Aniocha North",
"Aniocha-North",
"Aniocha-South",
"Bomadi",
"Burutu",
"Ethiope-East",
"Ethiope-West",
"Ika-North-East",
"Ika-South",
"Isoko-North",
"Isoko-South",
"Ndokwa-East",
"Ndokwa-West",
"Okpe",
"Oshimili-North",
"Oshimili-South",
"Patani",
"Sapele",
"Udu",
"Ughelli-North",
"Ughelli-South",
"Ukwuani",
"Uvwie",
"Warri South-West",
"Warri North",
"Warri South"
]
},
{
"code": "EB",
"name": "Ebonyi",
"capital": "Abakaliki",
"lat": "6.199691799435065",
"long":"8.0348906",
"lgas": [
"Abakaliki",
"Afikpo-North",
"Afikpo South (Edda)",
"Ebonyi",
"Ezza-North",
"Ezza-South",
"Ikwo",
"Ishielu",
"Ivo",
"Izzi",
"Ohaukwu",
"Onicha"
]
},
{
"code": "ED",
"name": "Edo",
"capital": "Benin City",
"lat": "6.607657499417959",
"long":"5.9722713",
"lgas": [
"Akoko Edo",
"Egor",
"Esan-Central",
"Esan-North-East",
"Esan-South-East",
"Esan-West",
"Etsako-Central",
"Etsako-East",
"Etsako-West",
"Igueben",
"Ikpoba-Okha",
"Oredo",
"Orhionmwon",
"Ovia-North-East",
"Ovia-South-West",
"Owan East",
"Owan-West",
"Uhunmwonde"
]
},
{
"code": "EK",
"name": "Ekiti",
"capital": "Ado-Ekiti",
"lat": "7.736890999391845",
"long":"5.2738326",
"lgas": [
"Ado-Ekiti",
"Efon",
"Ekiti-East",
"Ekiti-South-West",
"Ekiti-West",
"Emure",
"Gbonyin",
"Ido-Osi",
"Ijero",
"Ikere",
"Ikole",
"Ilejemeje",
"Irepodun Ifelodun",
"Ise-Orun",
"Moba",
"Oye"
]
},
{
"code": "EN",
"name": "Enugu",
"capital": "Enugu",
"lat": "6.553609399419997",
"long":"7.4143061",
"lgas": [
"Aninri",
"Awgu",
"Enugu-East",
"Enugu-North",
"Enugu-South",
"Ezeagu",
"Igbo-Etiti",
"Igbo-Eze-North",
"Igbo-Eze-South",
"Isi-Uzo",
"Nkanu-East",
"Nkanu-West",
"Nsukka",
"Oji-River",
"Udenu",
"Udi",
"Uzo-Uwani"
]
},
{
"code": "GO",
"name": "Gombe",
"capital": "Gombe",
"lat": "10.383009999458512",
"long":"11.206567",
"lgas": [
"Akko",
"Balanga",
"Billiri",
"Dukku",
"Funakaye",
"Gombe",
"Kaltungo",
"Kwami",
"Nafada",
"Shongom",
"Yamaltu Deba"
]
},
{
"code": "IM",
"name": "Imo",
"capital": "Owerri",
"lat": "5.585945599467946",
"long":"7.0669651",
"lgas": [
"Aboh-Mbaise",
"Ahiazu-Mbaise",
"Ehime-Mbano",
"Ezinihitte",
"Ideato-North",
"Ideato-South",
"Ihitte Uboma",
"Ikeduru",
"Isiala-Mbano",
"Isu",
"Mbaitoli",
"Ngor-Okpala",
"Njaba",
"Nkwerre",
"Nwangele",
"Obowo",
"Oguta",
"Ohaji-Egbema",
"Okigwe",
"Onuimo",
"Orlu",
"Orsu",
"Oru-East",
"Oru-West",
"Owerri-Municipal",
"Owerri-North",
"Owerri-West"
]
},
{
"code": "JI",
"name": "Jigawa",
"capital": "Dutse",
"lat": "12.325236199610885",
"long":"9.510329599999999",
"lgas": [
"Auyo",
"Babura",
"Biriniwa",
"Birnin-Kudu",
"Buji",
"Dutse",
"Gagarawa",
"Garki",
"Gumel",
"Guri",
"Gwaram",
"Gwiwa",
"Hadejia",
"Jahun",
"Kafin-Hausa",
"Kaugama",
"Kazaure",
"Kiri kasama",
"Maigatari",
"Malam Madori",
"Miga",
"Ringim",
"Roni",
"Sule-Tankarkar",
"Taura",
"Yankwashi"
]
},
{
"code": "KD",
"name": "Kaduna",
"capital": "Kaduna",
"lat": "10.382531799458487",
"long":"7.853322600000001",
"lgas": [
"Birnin-Gwari",
"Chikun",
"Giwa",
"Igabi",
"Ikara",
"Jaba",
"Jema'A",
"Kachia",
"Kaduna-North",
"Kaduna-South",
"Kagarko",
"Kajuru",
"Kaura",
"Kauru",
"Kubau",
"Kudan",
"Lere",
"Makarfi",
"Sabon-Gari",
"Sanga",
"Soba",
"Zangon-Kataf",
"Zaria"
]
},
{
"code": "KN",
"name": "Kano",
"capital": "Kano",
"lat": "11.894838899570903",
"long":"8.5364136",
"lgas": [
"Ajingi",
"Albasu",
"Bagwai",
"Bebeji",
"Bichi",
"Bunkure",
"Dala",
"Dambatta",
"Dawakin-Kudu",
"Dawakin-Tofa",
"Doguwa",
"Fagge",
"Gabasawa",
"Garko",
"Garun-Mallam",
"Gaya",
"Gezawa",
"Gwale",
"Gwarzo",
"Kabo",
"Kano-Municipal",
"Karaye",
"Kibiya",
"Kiru",
"Kumbotso",
"Kunchi",
"Kura",
"Madobi",
"Makoda",
"Minjibir",
"Nasarawa",
"Rano",
"Rimin-Gado",
"Rogo",
"Shanono",
"Sumaila",
"Takai",
"Tarauni",
"Tofa",
"Tsanyawa",
"Tudun-Wada",
"Ungogo",
"Warawa",
"Wudil"
]
},
{
"code": "KT",
"name": "Katsina",
"capital": "Kastina",
"lat": "12.563082499634245",
"long":"7.6207063",
"lgas": [
"Bakori",
"Batagarawa",
"Batsari",
"Baure",
"Bindawa",
"Charanchi",
"Dan-Musa",
"Dandume",
"Danja",
"Daura",
"Dutsi",
"Dutsin-Ma",
"Faskari",
"Funtua",
"Ingawa",
"Jibia",
"Kafur",
"Kaita",
"Kankara",
"Kankia",
"Katsina",
"Kurfi",
"Kusada",
"Mai-Adua",
"Malumfashi",
"Mani",
"Mashi",
"Matazu",
"Musawa",
"Rimi",
"Sabuwa",
"Safana",
"Sandamu",
"Zango"
]
},
{
"code": "KE",
"name": "Kebbi",
"capital": "Birnin-Kebbi",
"lat": "11.416757399530335",
"long":"4.107454499999999",
"lgas": [
"Aleiro",
"Arewa-Dandi",
"Argungu",
"Augie",
"Bagudo",
"Birnin-Kebbi",
"Bunza",
"Dandi",
"Fakai",
"Gwandu",
"Jega",
"Kalgo",
"Koko-Besse",
"Maiyama",
"Ngaski",
"Sakaba",
"Shanga",
"Suru",
"Wasagu/Danko",
"Yauri",
"Zuru"
]
},
{
"code": "KO",
"name": "Kogi",
"capital": "Lokoja",
"lat": "7.79496019939138",
"long":"6.686866899999999",
"lgas": [
"Adavi",
"Ajaokuta",
"Ankpa",
"Dekina",
"Ibaji",
"Idah",
"Igalamela-Odolu",
"Ijumu",
"Kabba Bunu",
"Kogi",
"Lokoja",
"Mopa-Muro",
"Ofu",
"Ogori Magongo",
"Okehi",
"Okene",
"Olamaboro",
"Omala",
"Oyi",
"Yagba-East",
"Yagba-West"
]
},
{
"code": "KW",
"name": "Kwara",
"capital": "Ilorin",
"lat": "8.836789099397848",
"long":"4.668848699999999",
"lgas": [
"Asa",
"Baruten",
"Edu",
"Ekiti (Araromi/Opin)",
"Ilorin-East",
"Ilorin-South",
"Ilorin-West",
"Isin",
"Kaiama",
"Moro",
"Offa",
"Oke-Ero",
"Oyun",
"Pategi"
]
},
{
"code": "LA",
"name": "Lagos",
"capital": "Ikeja",
"lat": "6.526903299421034",
"long":"3.5774005",
"lgas": [
"Agege",
"Ajeromi-Ifelodun",
"Alimosho",
"Amuwo-Odofin",
"Apapa",
"Badagry",
"Epe",
"Eti-Osa",
"Ibeju-Lekki",
"Ifako-Ijaiye",
"Ikeja",
"Ikorodu",
"Kosofe",
"Lagos-Island",
"Lagos-Mainland",
"Mushin",
"Ojo",
"Oshodi-Isolo",
"Shomolu",
"Surulere",
"Yewa-South"
]
},
{
"code": "NA",
"name": "Nassarawa",
"capital": "Lafia",
"lat": "8.438786799392046",
"long":"8.238284899999998",
"lgas": [
"Akwanga",
"Awe",
"Doma",
"Karu",
"Keana",
"Keffi",
"Kokona",
"Lafia",
"Nasarawa",
"Nasarawa-Eggon",
"Obi",
"Wamba",
"Toto"
]
},
{
"code": "NI",
"name": "Niger",
"capital": "Minna",
"lat": "9.932608299434758",
"long":"5.651108799999999",
"lgas": [
"Agaie",
"Agwara",
"Bida",
"Borgu",
"Bosso",
"Chanchaga",
"Edati",
"Gbako",
"Gurara",
"Katcha",
"Kontagora",
"Lapai",
"Lavun",
"Magama",
"Mariga",
"Mashegu",
"Mokwa",
"Moya",
"Paikoro",
"Rafi",
"Rijau",
"Shiroro",
"Suleja",
"Tafa",
"Wushishi"
]
},
{
"code": "OG",
"name": "Ogun",
"capital": "Abeokuta",
"lat": "6.978858199405861",
"long":"3.4389293",
"lgas": [
"Abeokuta-North",
"Abeokuta-South",
"Ado-Odo Ota",
"Ewekoro",
"Ifo",
"Ijebu-East",
"Ijebu-North",
"Ijebu-North-East",
"Ijebu-Ode",
"Ikenne",
"Imeko-Afon",
"Ipokia",
"Obafemi-Owode",
"Odeda",
"Odogbolu",
"Ogun-Waterside",
"Remo-North",
"Shagamu",
"Yewa North"
]
},
{
"code": "ON",
"name": "Ondo",
"capital": "Akure",
"lat": "7.0209685994047035",
"long":"5.0567477",
"lgas": [
"Akoko North-East",
"Akoko North-West",
"Akoko South-West",
"Akoko South-East",
"Akure-North",
"Akure-South",
"Ese-Odo",
"Idanre",
"Ifedore",
"Ilaje",
"Ile-Oluji-Okeigbo",
"Irele",
"Odigbo",
"Okitipupa",
"Ondo West",
"Ondo-East",
"Ose",
"Owo"
]
},
{
"code": "OS",
"name": "Osun",
"capital": "Osogbo",
"lat": "7.548404699393967",
"long":"4.497830700000001",
"lgas": [
"Atakumosa West",
"Atakumosa East",
"Ayedaade",
"Ayedire",
"Boluwaduro",
"Boripe",
"Ede South",
"Ede North",
"Egbedore",
"Ejigbo",
"Ife North",
"Ife South",
"Ife-Central",
"Ife-East",
"Ifelodun",
"Ila",
"Ilesa-East",
"Ilesa-West",
"Irepodun",
"Irewole",
"Isokan",
"Iwo",
"Obokun",
"Odo-Otin",
"Ola Oluwa",
"Olorunda",
"Oriade",
"Orolu",
"Osogbo"
]
},
{
"code": "OY",
"name": "Oyo",
"capital": "Ibadan",
"lat": "8.215124899390593",
"long":"3.5642896999999993",
"lgas": [
"Afijio",
"Akinyele",
"Atiba",
"Atisbo",
"Egbeda",
"Ibadan North",
"Ibadan North-East",
"Ibadan North-West",
"Ibadan South-East",
"Ibadan South-West",
"Ibarapa-Central",
"Ibarapa-East",
"Ibarapa-North",
"Ido",
"Ifedayo",
"Irepo",
"Iseyin",
"Itesiwaju",
"Iwajowa",
"Kajola",
"Lagelu",
"Ogo-Oluwa",
"Ogbomosho-North",
"Ogbomosho-South",
"Olorunsogo",
"Oluyole",
"Ona-Ara",
"Orelope",
"Ori-Ire",
"Oyo-West",
"Oyo-East",
"Saki-East",
"Saki-West",
"Surulere"
]
},
{
"code": "PL",
"name": "Plateau",
"capital": "Jos",
"lat": "9.058344599402849",
"long":"9.6826289",
"lgas": [
"Barkin-Ladi",
"Bassa",
"Bokkos",
"Jos-East",
"Jos-North",
"Jos-South",
"Kanam",
"Kanke",
"Langtang-North",
"Langtang-South",
"Mangu",
"Mikang",
"Pankshin",
"Qua'an Pan",
"Riyom",
"Shendam",
"Wase"
]
},
{
"code": "RI",
"name": "Rivers",
"capital": "Port-Harcourt",
"lat": "4.841602799518385",
"long":"6.8604088",
"lgas": [
"Abua Odual",
"Ahoada-East",
"Ahoada-West",
"Akuku Toru",
"Andoni",
"Asari-Toru",
"Bonny",
"Degema",
"Eleme",
"Emuoha",
"Etche",
"Gokana",
"Ikwerre",
"Khana",
"Obio Akpor",
"Ogba-Egbema-Ndoni",
"Ogba Egbema Ndoni",
"Ogu Bolo",
"Okrika",
"Omuma",
"Opobo Nkoro",
"Oyigbo",
"Port-Harcourt",
"Tai"
]
},
{
"code": "SO",
"name": "Sokoto",
"capital": "Sokoto",
"lat": "13.061119499685718",
"long":"5.3152203",
"lgas": [
"Binji",
"Bodinga",
"Dange-Shuni",
"Gada",
"Goronyo",
"Gudu",
"Gwadabawa",
"Illela",
"Kebbe",
"Kware",
"Rabah",
"Sabon Birni",
"Shagari",
"Silame",
"Sokoto-North",
"Sokoto-South",
"Tambuwal",
"Tangaza",
"Tureta",
"Wamako",
"Wurno",
"Yabo"
]
},
{
"code": "TA",
"name": "Taraba",
"capital": "Jalingo",
"lat": "8.0141333993904",
"long":"10.737633599999999",
"lgas": [
"Ardo-Kola",
"Bali",
"Donga",
"Gashaka",
"Gassol",
"Ibi",
"Jalingo",
"Karim-Lamido",
"Kurmi",
"Lau",
"Sardauna",
"Takum",
"Ussa",
"Wukari",
"Yorro",
"Zing"
]
},
{
"code": "YO",
"name": "Yobe",
"capital": "Damaturu",
"lat": "12.123324199591742",
"long":"11.506593699999998",
"lgas": [
"Bade",
"Bursari",
"Damaturu",
"Fika",
"Fune",
"Geidam",
"Gujba",
"Gulani",
"Jakusko",
"Karasuwa",
"Machina",
"Nangere",
"Nguru",
"Potiskum",
"Tarmuwa",
"Yunusari",
"Yusufari"
]
},
{
"code": "ZA",
"name": "Zamfara",
"capital": "Gusau",
"lat": "12.007899799581104",
"long":"6.4191432",
"lgas": [
"Anka",
"Bakura",
"Birnin Magaji/Kiyaw",
"Bukkuyum",
"Bungudu",
"Gummi",
"Gusau",
"Isa",
"Kaura-Namoda",
"Kiyawa",
"Maradun",
"Maru",
"Shinkafi",
"Talata-Mafara",
"Tsafe",
"Zurmi"
]
}
]

We want to display the state, capital, longitude and latitude in a table and we will use the array.map() method.

The map() method in JavaScript is a higher-order function that is used to iterate over an array and transform each element in the array according to a specified mapping function. It creates a new array with the results of calling the provided function on every element in the calling array.

Next, we will create our HTML table with the required headings:

<table>
<thead>
<tr>
<th>State</th>
<th>Capital</th>
<th>Longitude</th>
<th>Latitude</th>
</tr>
</thead>
<tbody id="box"></tbody>
</table>

Now let’s map though the given array of objects:

let html = "<tr>";
states.map((item) => {
    html+="<tr>";
    html+="<td>"+ item.name +"</td>";
    html+="<td>"+ item.capital +"</td>";
    html+="<td>"+ item.lat +"</td>";
    html+="<td>"+ item.long +"</td>";
    html+="</tr>";
})
document.getElementById("box").innerHTML = html;

Result:

Bonus

We can add a serial numbering feature by adding a serial number column and the index option from the map function:

<table>
<thead>
<tr>
<th>S/N</th>
<th>State</th>
<th>Capital</th>
<th>Longitude</th>
<th>Latitude</th>
</tr>
</thead>
<tbody id="box"></tbody>
</table>

let html = "<tr>";
states.map((item, index) => {
    html+="<tr>";
    html+="<td>"+ `${index+1}` +"</td>";
    html+="<td>"+ item.name +"</td>";
    html+="<td>"+ item.capital +"</td>";
    html+="<td>"+ item.lat +"</td>";
    html+="<td>"+ item.long +"</td>";
    html+="</tr>";
    html+="</table>";
})
document.getElementById("box").innerHTML = html;

Result:

Full code:

<html>
<body>
<table>
<thead>
<tr>
<th>S/N</th>
<th>State</th>
<th>Capital</th>
<th>Longitude</th>
<th>Latitude</th>
</tr>
</thead>
<tbody id="box"></tbody>
</table>

<script>
const states = [
{
"code": "FC",
"name": "Abuja",
"capital": "",
"lat": "8.831122799397733",
"long":"7.172467300000001",
"lgas": [
"Abuja",
"Kwali",
"Kuje",
"Gwagwalada",
"Bwari",
"Abaji"
]
},
{
"code": "AB",
"name": "Abia",
"capital": "Umuahia",
"lat": "5.45409529947607",
"long":"7.5153071",
"lgas": [
"Aba North",
"Aba South",
"Arochukwu",
"Bende",
"Ikawuno",
"Ikwuano",
"Isiala-Ngwa North",
"Isiala-Ngwa South",
"Isuikwuato",
"Umu Nneochi",
"Obi Ngwa",
"Obioma Ngwa",
"Ohafia",
"Ohaozara",
"Osisioma",
"Ugwunagbo",
"Ukwa West",
"Ukwa East",
"Umuahia North",
"Umuahia South"
]
},
{
"code": "AD",
"name": "Adamawa",
"capital": "Yola",
"lat": "9.512977199417053",
"long":"12.388188699999999",
"lgas": [
"Demsa",
"Fufore",
"Ganye",
"Girei",
"Gombi",
"Guyuk",
"Hong",
"Jada",
"Lamurde",
"Madagali",
"Maiha",
"Mayo-Belwa",
"Michika",
"Mubi-North",
"Mubi-South",
"Numan",
"Shelleng",
"Song",
"Toungo",
"Yola North",
"Yola South"
]
},
{
"code": "AK",
"name": "AkwaIbom",
"capital": "Uyo",
"lat": "4.940863799511036",
"long":"7.8412267",
"lgas": [
"Abak",
"Eastern-Obolo",
"Eket",
"Esit-Eket",
"Essien-Udim",
"Etim-Ekpo",
"Etinan",
"Ibeno",
"Ibesikpo-Asutan",
"Ibiono-Ibom",
"Ika",
"Ikono",
"Ikot-Abasi",
"Ikot-Ekpene",
"Ini",
"Itu",
"Mbo",
"Mkpat-Enin",
"Nsit-Atai",
"Nsit-Ibom",
"Nsit-Ubium",
"Obot-Akara",
"Okobo",
"Onna",
"Oron",
"Oruk Anam",
"Udung-Uko",
"Ukanafun",
"Urue-Offong/Oruko",
"Uruan",
"Uyo"
]
},
{
"code": "AN",
"name": "Anambra",
"capital": "Awka",
"lat": "6.2183135994341985",
"long":"6.9531842",
"lgas": [
"Aguata",
"Anambra East",
"Anambra West",
"Anaocha",
"Awka North",
"Awka South",
"Ayamelum",
"Dunukofia",
"Ekwusigo",
"Idemili-North",
"Idemili-South",
"Ihiala",
"Njikoka",
"Nnewi-North",
"Nnewi-South",
"Ogbaru",
"Onitsha-North",
"Onitsha-South",
"Orumba-North",
"Orumba-South"
]
},
{
"code": "BA",
"name": "Bauchi",
"capital": "Bauchi",
"lat": "10.622828399473097",
"long":"10.028775399999999",
"lgas": [
"Alkaleri",
"Bauchi",
"Bogoro",
"Damban",
"Darazo",
"Dass",
"Gamawa",
"Ganjuwa",
"Giade",
"Itas Gadau",
"Jama'Are",
"Katagum",
"Kirfi",
"Misau",
"Ningi",
"Shira",
"Tafawa-Balewa",
"Toro",
"Warji",
"Zaki"
]
},
{
"code": "BY",
"name": "Bayelsa",
"capital": "Yenagoa",
"lat": "4.762978599524332",
"long":"6.028898",
"lgas": [
"Brass",
"Ekeremor",
"Kolokuma Opokuma",
"Nembe",
"Ogbia",
"Sagbama",
"Southern-Ijaw",
"Yenagoa"
]
},
{
"code": "BE",
"name": "Benue",
"capital": "Makurdi",
"lat": "7.35057469939717",
"long":"8.777287699999999",
"lgas": [
"Ado",
"Agatu",
"Apa",
"Buruku",
"Gboko",
"Guma",
"Gwer-East",
"Gwer-West",
"Katsina-Ala",
"Konshisha",
"Kwande",
"Logo",
"Makurdi",
"Ogbadibo",
"Ohimini",
"Oju",
"Okpokwu",
"Otukpo",
"Tarka",
"Ukum",
"Ushongo",
"Vandeikya"
]
},
{
"code": "BO",
"name": "Borno",
"capital": "Maiduguri",
"lat": "12.18753919959776",
"long":"13.308003399999999",
"lgas": [
"Abadam",
"Askira-Uba",
"Bama",
"Bayo",
"Biu",
"Chibok",
"Damboa",
"Dikwa",
"Gubio",
"Guzamala",
"Gwoza",
"Hawul",
"Jere",
"Kaga",
"Kala Balge",
"Konduga",
"Kukawa",
"Kwaya-Kusar",
"Mafa",
"Magumeri",
"Maiduguri",
"Marte",
"Mobbar",
"Monguno",
"Ngala",
"Nganzai",
"Shani"
]
},
{
"code": "CR",
"name": "CrossRiver",
"capital": "Calabar",
"lat": "5.867196599451846",
"long":"8.5204774",
"lgas": [
"Abi",
"Akamkpa",
"Akpabuyo",
"Bakassi",
"Bekwarra",
"Biase",
"Boki",
"Calabar-Municipal",
"Calabar-South",
"Etung",
"Ikom",
"Obanliku",
"Obubra",
"Obudu",
"Odukpani",
"Ogoja",
"Yakurr",
"Yala"
]
},
{
"code": "DE",
"name": "Delta",
"capital": "Asaba",
"lat": "5.527306099471514",
"long":"6.178416699999999",
"lgas": [
"Aniocha North",
"Aniocha-North",
"Aniocha-South",
"Bomadi",
"Burutu",
"Ethiope-East",
"Ethiope-West",
"Ika-North-East",
"Ika-South",
"Isoko-North",
"Isoko-South",
"Ndokwa-East",
"Ndokwa-West",
"Okpe",
"Oshimili-North",
"Oshimili-South",
"Patani",
"Sapele",
"Udu",
"Ughelli-North",
"Ughelli-South",
"Ukwuani",
"Uvwie",
"Warri South-West",
"Warri North",
"Warri South"
]
},
{
"code": "EB",
"name": "Ebonyi",
"capital": "Abakaliki",
"lat": "6.199691799435065",
"long":"8.0348906",
"lgas": [
"Abakaliki",
"Afikpo-North",
"Afikpo South (Edda)",
"Ebonyi",
"Ezza-North",
"Ezza-South",
"Ikwo",
"Ishielu",
"Ivo",
"Izzi",
"Ohaukwu",
"Onicha"
]
},
{
"code": "ED",
"name": "Edo",
"capital": "Benin City",
"lat": "6.607657499417959",
"long":"5.9722713",
"lgas": [
"Akoko Edo",
"Egor",
"Esan-Central",
"Esan-North-East",
"Esan-South-East",
"Esan-West",
"Etsako-Central",
"Etsako-East",
"Etsako-West",
"Igueben",
"Ikpoba-Okha",
"Oredo",
"Orhionmwon",
"Ovia-North-East",
"Ovia-South-West",
"Owan East",
"Owan-West",
"Uhunmwonde"
]
},
{
"code": "EK",
"name": "Ekiti",
"capital": "Ado-Ekiti",
"lat": "7.736890999391845",
"long":"5.2738326",
"lgas": [
"Ado-Ekiti",
"Efon",
"Ekiti-East",
"Ekiti-South-West",
"Ekiti-West",
"Emure",
"Gbonyin",
"Ido-Osi",
"Ijero",
"Ikere",
"Ikole",
"Ilejemeje",
"Irepodun Ifelodun",
"Ise-Orun",
"Moba",
"Oye"
]
},
{
"code": "EN",
"name": "Enugu",
"capital": "Enugu",
"lat": "6.553609399419997",
"long":"7.4143061",
"lgas": [
"Aninri",
"Awgu",
"Enugu-East",
"Enugu-North",
"Enugu-South",
"Ezeagu",
"Igbo-Etiti",
"Igbo-Eze-North",
"Igbo-Eze-South",
"Isi-Uzo",
"Nkanu-East",
"Nkanu-West",
"Nsukka",
"Oji-River",
"Udenu",
"Udi",
"Uzo-Uwani"
]
},
{
"code": "GO",
"name": "Gombe",
"capital": "Gombe",
"lat": "10.383009999458512",
"long":"11.206567",
"lgas": [
"Akko",
"Balanga",
"Billiri",
"Dukku",
"Funakaye",
"Gombe",
"Kaltungo",
"Kwami",
"Nafada",
"Shongom",
"Yamaltu Deba"
]
},
{
"code": "IM",
"name": "Imo",
"capital": "Owerri",
"lat": "5.585945599467946",
"long":"7.0669651",
"lgas": [
"Aboh-Mbaise",
"Ahiazu-Mbaise",
"Ehime-Mbano",
"Ezinihitte",
"Ideato-North",
"Ideato-South",
"Ihitte Uboma",
"Ikeduru",
"Isiala-Mbano",
"Isu",
"Mbaitoli",
"Ngor-Okpala",
"Njaba",
"Nkwerre",
"Nwangele",
"Obowo",
"Oguta",
"Ohaji-Egbema",
"Okigwe",
"Onuimo",
"Orlu",
"Orsu",
"Oru-East",
"Oru-West",
"Owerri-Municipal",
"Owerri-North",
"Owerri-West"
]
},
{
"code": "JI",
"name": "Jigawa",
"capital": "Dutse",
"lat": "12.325236199610885",
"long":"9.510329599999999",
"lgas": [
"Auyo",
"Babura",
"Biriniwa",
"Birnin-Kudu",
"Buji",
"Dutse",
"Gagarawa",
"Garki",
"Gumel",
"Guri",
"Gwaram",
"Gwiwa",
"Hadejia",
"Jahun",
"Kafin-Hausa",
"Kaugama",
"Kazaure",
"Kiri kasama",
"Maigatari",
"Malam Madori",
"Miga",
"Ringim",
"Roni",
"Sule-Tankarkar",
"Taura",
"Yankwashi"
]
},
{
"code": "KD",
"name": "Kaduna",
"capital": "Kaduna",
"lat": "10.382531799458487",
"long":"7.853322600000001",
"lgas": [
"Birnin-Gwari",
"Chikun",
"Giwa",
"Igabi",
"Ikara",
"Jaba",
"Jema'A",
"Kachia",
"Kaduna-North",
"Kaduna-South",
"Kagarko",
"Kajuru",
"Kaura",
"Kauru",
"Kubau",
"Kudan",
"Lere",
"Makarfi",
"Sabon-Gari",
"Sanga",
"Soba",
"Zangon-Kataf",
"Zaria"
]
},
{
"code": "KN",
"name": "Kano",
"capital": "Kano",
"lat": "11.894838899570903",
"long":"8.5364136",
"lgas": [
"Ajingi",
"Albasu",
"Bagwai",
"Bebeji",
"Bichi",
"Bunkure",
"Dala",
"Dambatta",
"Dawakin-Kudu",
"Dawakin-Tofa",
"Doguwa",
"Fagge",
"Gabasawa",
"Garko",
"Garun-Mallam",
"Gaya",
"Gezawa",
"Gwale",
"Gwarzo",
"Kabo",
"Kano-Municipal",
"Karaye",
"Kibiya",
"Kiru",
"Kumbotso",
"Kunchi",
"Kura",
"Madobi",
"Makoda",
"Minjibir",
"Nasarawa",
"Rano",
"Rimin-Gado",
"Rogo",
"Shanono",
"Sumaila",
"Takai",
"Tarauni",
"Tofa",
"Tsanyawa",
"Tudun-Wada",
"Ungogo",
"Warawa",
"Wudil"
]
},
{
"code": "KT",
"name": "Katsina",
"capital": "Kastina",
"lat": "12.563082499634245",
"long":"7.6207063",
"lgas": [
"Bakori",
"Batagarawa",
"Batsari",
"Baure",
"Bindawa",
"Charanchi",
"Dan-Musa",
"Dandume",
"Danja",
"Daura",
"Dutsi",
"Dutsin-Ma",
"Faskari",
"Funtua",
"Ingawa",
"Jibia",
"Kafur",
"Kaita",
"Kankara",
"Kankia",
"Katsina",
"Kurfi",
"Kusada",
"Mai-Adua",
"Malumfashi",
"Mani",
"Mashi",
"Matazu",
"Musawa",
"Rimi",
"Sabuwa",
"Safana",
"Sandamu",
"Zango"
]
},
{
"code": "KE",
"name": "Kebbi",
"capital": "Birnin-Kebbi",
"lat": "11.416757399530335",
"long":"4.107454499999999",
"lgas": [
"Aleiro",
"Arewa-Dandi",
"Argungu",
"Augie",
"Bagudo",
"Birnin-Kebbi",
"Bunza",
"Dandi",
"Fakai",
"Gwandu",
"Jega",
"Kalgo",
"Koko-Besse",
"Maiyama",
"Ngaski",
"Sakaba",
"Shanga",
"Suru",
"Wasagu/Danko",
"Yauri",
"Zuru"
]
},
{
"code": "KO",
"name": "Kogi",
"capital": "Lokoja",
"lat": "7.79496019939138",
"long":"6.686866899999999",
"lgas": [
"Adavi",
"Ajaokuta",
"Ankpa",
"Dekina",
"Ibaji",
"Idah",
"Igalamela-Odolu",
"Ijumu",
"Kabba Bunu",
"Kogi",
"Lokoja",
"Mopa-Muro",
"Ofu",
"Ogori Magongo",
"Okehi",
"Okene",
"Olamaboro",
"Omala",
"Oyi",
"Yagba-East",
"Yagba-West"
]
},
{
"code": "KW",
"name": "Kwara",
"capital": "Ilorin",
"lat": "8.836789099397848",
"long":"4.668848699999999",
"lgas": [
"Asa",
"Baruten",
"Edu",
"Ekiti (Araromi/Opin)",
"Ilorin-East",
"Ilorin-South",
"Ilorin-West",
"Isin",
"Kaiama",
"Moro",
"Offa",
"Oke-Ero",
"Oyun",
"Pategi"
]
},
{
"code": "LA",
"name": "Lagos",
"capital": "Ikeja",
"lat": "6.526903299421034",
"long":"3.5774005",
"lgas": [
"Agege",
"Ajeromi-Ifelodun",
"Alimosho",
"Amuwo-Odofin",
"Apapa",
"Badagry",
"Epe",
"Eti-Osa",
"Ibeju-Lekki",
"Ifako-Ijaiye",
"Ikeja",
"Ikorodu",
"Kosofe",
"Lagos-Island",
"Lagos-Mainland",
"Mushin",
"Ojo",
"Oshodi-Isolo",
"Shomolu",
"Surulere",
"Yewa-South"
]
},
{
"code": "NA",
"name": "Nassarawa",
"capital": "Lafia",
"lat": "8.438786799392046",
"long":"8.238284899999998",
"lgas": [
"Akwanga",
"Awe",
"Doma",
"Karu",
"Keana",
"Keffi",
"Kokona",
"Lafia",
"Nasarawa",
"Nasarawa-Eggon",
"Obi",
"Wamba",
"Toto"
]
},
{
"code": "NI",
"name": "Niger",
"capital": "Minna",
"lat": "9.932608299434758",
"long":"5.651108799999999",
"lgas": [
"Agaie",
"Agwara",
"Bida",
"Borgu",
"Bosso",
"Chanchaga",
"Edati",
"Gbako",
"Gurara",
"Katcha",
"Kontagora",
"Lapai",
"Lavun",
"Magama",
"Mariga",
"Mashegu",
"Mokwa",
"Moya",
"Paikoro",
"Rafi",
"Rijau",
"Shiroro",
"Suleja",
"Tafa",
"Wushishi"
]
},
{
"code": "OG",
"name": "Ogun",
"capital": "Abeokuta",
"lat": "6.978858199405861",
"long":"3.4389293",
"lgas": [
"Abeokuta-North",
"Abeokuta-South",
"Ado-Odo Ota",
"Ewekoro",
"Ifo",
"Ijebu-East",
"Ijebu-North",
"Ijebu-North-East",
"Ijebu-Ode",
"Ikenne",
"Imeko-Afon",
"Ipokia",
"Obafemi-Owode",
"Odeda",
"Odogbolu",
"Ogun-Waterside",
"Remo-North",
"Shagamu",
"Yewa North"
]
},
{
"code": "ON",
"name": "Ondo",
"capital": "Akure",
"lat": "7.0209685994047035",
"long":"5.0567477",
"lgas": [
"Akoko North-East",
"Akoko North-West",
"Akoko South-West",
"Akoko South-East",
"Akure-North",
"Akure-South",
"Ese-Odo",
"Idanre",
"Ifedore",
"Ilaje",
"Ile-Oluji-Okeigbo",
"Irele",
"Odigbo",
"Okitipupa",
"Ondo West",
"Ondo-East",
"Ose",
"Owo"
]
},
{
"code": "OS",
"name": "Osun",
"capital": "Osogbo",
"lat": "7.548404699393967",
"long":"4.497830700000001",
"lgas": [
"Atakumosa West",
"Atakumosa East",
"Ayedaade",
"Ayedire",
"Boluwaduro",
"Boripe",
"Ede South",
"Ede North",
"Egbedore",
"Ejigbo",
"Ife North",
"Ife South",
"Ife-Central",
"Ife-East",
"Ifelodun",
"Ila",
"Ilesa-East",
"Ilesa-West",
"Irepodun",
"Irewole",
"Isokan",
"Iwo",
"Obokun",
"Odo-Otin",
"Ola Oluwa",
"Olorunda",
"Oriade",
"Orolu",
"Osogbo"
]
},
{
"code": "OY",
"name": "Oyo",
"capital": "Ibadan",
"lat": "8.215124899390593",
"long":"3.5642896999999993",
"lgas": [
"Afijio",
"Akinyele",
"Atiba",
"Atisbo",
"Egbeda",
"Ibadan North",
"Ibadan North-East",
"Ibadan North-West",
"Ibadan South-East",
"Ibadan South-West",
"Ibarapa-Central",
"Ibarapa-East",
"Ibarapa-North",
"Ido",
"Ifedayo",
"Irepo",
"Iseyin",
"Itesiwaju",
"Iwajowa",
"Kajola",
"Lagelu",
"Ogo-Oluwa",
"Ogbomosho-North",
"Ogbomosho-South",
"Olorunsogo",
"Oluyole",
"Ona-Ara",
"Orelope",
"Ori-Ire",
"Oyo-West",
"Oyo-East",
"Saki-East",
"Saki-West",
"Surulere"
]
},
{
"code": "PL",
"name": "Plateau",
"capital": "Jos",
"lat": "9.058344599402849",
"long":"9.6826289",
"lgas": [
"Barkin-Ladi",
"Bassa",
"Bokkos",
"Jos-East",
"Jos-North",
"Jos-South",
"Kanam",
"Kanke",
"Langtang-North",
"Langtang-South",
"Mangu",
"Mikang",
"Pankshin",
"Qua'an Pan",
"Riyom",
"Shendam",
"Wase"
]
},
{
"code": "RI",
"name": "Rivers",
"capital": "Port-Harcourt",
"lat": "4.841602799518385",
"long":"6.8604088",
"lgas": [
"Abua Odual",
"Ahoada-East",
"Ahoada-West",
"Akuku Toru",
"Andoni",
"Asari-Toru",
"Bonny",
"Degema",
"Eleme",
"Emuoha",
"Etche",
"Gokana",
"Ikwerre",
"Khana",
"Obio Akpor",
"Ogba-Egbema-Ndoni",
"Ogba Egbema Ndoni",
"Ogu Bolo",
"Okrika",
"Omuma",
"Opobo Nkoro",
"Oyigbo",
"Port-Harcourt",
"Tai"
]
},
{
"code": "SO",
"name": "Sokoto",
"capital": "Sokoto",
"lat": "13.061119499685718",
"long":"5.3152203",
"lgas": [
"Binji",
"Bodinga",
"Dange-Shuni",
"Gada",
"Goronyo",
"Gudu",
"Gwadabawa",
"Illela",
"Kebbe",
"Kware",
"Rabah",
"Sabon Birni",
"Shagari",
"Silame",
"Sokoto-North",
"Sokoto-South",
"Tambuwal",
"Tangaza",
"Tureta",
"Wamako",
"Wurno",
"Yabo"
]
},
{
"code": "TA",
"name": "Taraba",
"capital": "Jalingo",
"lat": "8.0141333993904",
"long":"10.737633599999999",
"lgas": [
"Ardo-Kola",
"Bali",
"Donga",
"Gashaka",
"Gassol",
"Ibi",
"Jalingo",
"Karim-Lamido",
"Kurmi",
"Lau",
"Sardauna",
"Takum",
"Ussa",
"Wukari",
"Yorro",
"Zing"
]
},
{
"code": "YO",
"name": "Yobe",
"capital": "Damaturu",
"lat": "12.123324199591742",
"long":"11.506593699999998",
"lgas": [
"Bade",
"Bursari",
"Damaturu",
"Fika",
"Fune",
"Geidam",
"Gujba",
"Gulani",
"Jakusko",
"Karasuwa",
"Machina",
"Nangere",
"Nguru",
"Potiskum",
"Tarmuwa",
"Yunusari",
"Yusufari"
]
},
{
"code": "ZA",
"name": "Zamfara",
"capital": "Gusau",
"lat": "12.007899799581104",
"long":"6.4191432",
"lgas": [
"Anka",
"Bakura",
"Birnin Magaji/Kiyaw",
"Bukkuyum",
"Bungudu",
"Gummi",
"Gusau",
"Isa",
"Kaura-Namoda",
"Kiyawa",
"Maradun",
"Maru",
"Shinkafi",
"Talata-Mafara",
"Tsafe",
"Zurmi"
]
}
]
let html = "<tr>";
states.map((item, index) => {
    html+="<tr>";
    html+="<td>"+ `${index+1}` +"</td>";
    html+="<td>"+ item.name +"</td>";
    html+="<td>"+ item.capital +"</td>";
    html+="<td>"+ item.lat +"</td>";
    html+="<td>"+ item.long +"</td>";
    html+="</tr>";
    html+="</table>";
})
document.getElementById("box").innerHTML = html;
</script>
</body>
</html>

Start Learning JavaScript online

Start software development