Html table from json

  • (2 Pages)
  • +
  • 1
  • 2

25 Replies - 1223 Views - Last Post: 11 March 2019 - 06:30 AM

#1 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Html table from json

Posted 25 February 2019 - 10:49 AM

Hi. I'm relatively new to coding. I've been working with a simple node server and would like to pass some data to my index.html page. I've made a successful api call and saved the information to a json file. Now I'd like to make a table from that info but I'm totally lost how to do it. I've tried to use jquery and plain javascript but can't seem to get it right. I also tried to do it with pug template but didn't succeed. I'll put my codes here if someone could help me with this.

 
const express = require('express')
const axios = require('axios')
const app = express()
const port = 2000;
const fs = require("fs");

const api = axios.get('https://statsapi.web.nhl.com/api/v1/teams').then(response => {fs.writeFileSync("./JSONdata.json", JSON.stringify(response.data, null, "\t"))});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))
  



Here is my json file:
 {
  "copyright" : "NHL and the NHL Shield are registered trademarks of the National Hockey League. NHL and NHL team marks are the property of the NHL and its teams. © NHL 2019. All Rights Reserved.",
  "teams" : [ {
    "id" : 1,
    "name" : "New Jersey Devils",
    "link" : "/api/v1/teams/1",
    "venue" : {
      "name" : "Prudential Center",
      "link" : "/api/v1/venues/null",
      "city" : "Newark",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "NJD",
    "teamName" : "Devils",
    "locationName" : "New Jersey",
    "firstYearOfPlay" : "1982",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 23,
      "teamName" : "Devils",
      "link" : "/api/v1/franchises/23"
    },
    "shortName" : "New Jersey",
    "officialSiteUrl" : "http://www.newjerseydevils.com/",
    "franchiseId" : 23,
    "active" : true
  }, {
    "id" : 2,
    "name" : "New York Islanders",
    "link" : "/api/v1/teams/2",
    "venue" : {
      "id" : 5026,
      "name" : "Barclays Center",
      "link" : "/api/v1/venues/5026",
      "city" : "Brooklyn",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "NYI",
    "teamName" : "Islanders",
    "locationName" : "New York",
    "firstYearOfPlay" : "1972",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 22,
      "teamName" : "Islanders",
      "link" : "/api/v1/franchises/22"
    },
    "shortName" : "NY Islanders",
    "officialSiteUrl" : "http://www.newyorkislanders.com/",
    "franchiseId" : 22,
    "active" : true
  }, {
    "id" : 3,
    "name" : "New York Rangers",
    "link" : "/api/v1/teams/3",
    "venue" : {
      "id" : 5054,
      "name" : "Madison Square Garden",
      "link" : "/api/v1/venues/5054",
      "city" : "New York",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "NYR",
    "teamName" : "Rangers",
    "locationName" : "New York",
    "firstYearOfPlay" : "1926",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 10,
      "teamName" : "Rangers",
      "link" : "/api/v1/franchises/10"
    },
    "shortName" : "NY Rangers",
    "officialSiteUrl" : "http://www.newyorkrangers.com/",
    "franchiseId" : 10,
    "active" : true
  }, {
    "id" : 4,
    "name" : "Philadelphia Flyers",
    "link" : "/api/v1/teams/4",
    "venue" : {
      "id" : 5096,
      "name" : "Wells Fargo Center",
      "link" : "/api/v1/venues/5096",
      "city" : "Philadelphia",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "PHI",
    "teamName" : "Flyers",
    "locationName" : "Philadelphia",
    "firstYearOfPlay" : "1967",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 16,
      "teamName" : "Flyers",
      "link" : "/api/v1/franchises/16"
    },
    "shortName" : "Philadelphia",
    "officialSiteUrl" : "http://www.philadelphiaflyers.com/",
    "franchiseId" : 16,
    "active" : true
  }, {
    "id" : 5,
    "name" : "Pittsburgh Penguins",
    "link" : "/api/v1/teams/5",
    "venue" : {
      "id" : 5034,
      "name" : "PPG Paints Arena",
      "link" : "/api/v1/venues/5034",
      "city" : "Pittsburgh",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "PIT",
    "teamName" : "Penguins",
    "locationName" : "Pittsburgh",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 17,
      "teamName" : "Penguins",
      "link" : "/api/v1/franchises/17"
    },
    "shortName" : "Pittsburgh",
    "officialSiteUrl" : "http://pittsburghpenguins.com/",
    "franchiseId" : 17,
    "active" : true
  }, {
    "id" : 6,
    "name" : "Boston Bruins",
    "link" : "/api/v1/teams/6",
    "venue" : {
      "id" : 5085,
      "name" : "TD Garden",
      "link" : "/api/v1/venues/5085",
      "city" : "Boston",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "BOS",
    "teamName" : "Bruins",
    "locationName" : "Boston",
    "firstYearOfPlay" : "1924",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 6,
      "teamName" : "Bruins",
      "link" : "/api/v1/franchises/6"
    },
    "shortName" : "Boston",
    "officialSiteUrl" : "http://www.bostonbruins.com/",
    "franchiseId" : 6,
    "active" : true
  }, {
    "id" : 7,
    "name" : "Buffalo Sabres",
    "link" : "/api/v1/teams/7",
    "venue" : {
      "id" : 5039,
      "name" : "KeyBank Center",
      "link" : "/api/v1/venues/5039",
      "city" : "Buffalo",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "BUF",
    "teamName" : "Sabres",
    "locationName" : "Buffalo",
    "firstYearOfPlay" : "1970",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 19,
      "teamName" : "Sabres",
      "link" : "/api/v1/franchises/19"
    },
    "shortName" : "Buffalo",
    "officialSiteUrl" : "http://www.sabres.com/",
    "franchiseId" : 19,
    "active" : true
  }, {
    "id" : 8,
    "name" : "Montréal Canadiens",
    "link" : "/api/v1/teams/8",
    "venue" : {
      "id" : 5028,
      "name" : "Bell Centre",
      "link" : "/api/v1/venues/5028",
      "city" : "Montréal",
      "timeZone" : {
        "id" : "America/Montreal",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "MTL",
    "teamName" : "Canadiens",
    "locationName" : "Montréal",
    "firstYearOfPlay" : "1909",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 1,
      "teamName" : "Canadiens",
      "link" : "/api/v1/franchises/1"
    },
    "shortName" : "Montréal",
    "officialSiteUrl" : "http://www.canadiens.com/",
    "franchiseId" : 1,
    "active" : true
  }, {
    "id" : 9,
    "name" : "Ottawa Senators",
    "link" : "/api/v1/teams/9",
    "venue" : {
      "id" : 5031,
      "name" : "Canadian Tire Centre",
      "link" : "/api/v1/venues/5031",
      "city" : "Ottawa",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "OTT",
    "teamName" : "Senators",
    "locationName" : "Ottawa",
    "firstYearOfPlay" : "1990",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 30,
      "teamName" : "Senators",
      "link" : "/api/v1/franchises/30"
    },
    "shortName" : "Ottawa",
    "officialSiteUrl" : "http://www.ottawasenators.com/",
    "franchiseId" : 30,
    "active" : true
  }, {
    "id" : 10,
    "name" : "Toronto Maple Leafs",
    "link" : "/api/v1/teams/10",
    "venue" : {
      "name" : "Scotiabank Arena",
      "link" : "/api/v1/venues/null",
      "city" : "Toronto",
      "timeZone" : {
        "id" : "America/Toronto",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "TOR",
    "teamName" : "Maple Leafs",
    "locationName" : "Toronto",
    "firstYearOfPlay" : "1917",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 5,
      "teamName" : "Maple Leafs",
      "link" : "/api/v1/franchises/5"
    },
    "shortName" : "Toronto",
    "officialSiteUrl" : "http://www.mapleleafs.com/",
    "franchiseId" : 5,
    "active" : true
  }, {
    "id" : 12,
    "name" : "Carolina Hurricanes",
    "link" : "/api/v1/teams/12",
    "venue" : {
      "id" : 5066,
      "name" : "PNC Arena",
      "link" : "/api/v1/venues/5066",
      "city" : "Raleigh",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "CAR",
    "teamName" : "Hurricanes",
    "locationName" : "Carolina",
    "firstYearOfPlay" : "1979",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 26,
      "teamName" : "Hurricanes",
      "link" : "/api/v1/franchises/26"
    },
    "shortName" : "Carolina",
    "officialSiteUrl" : "http://www.carolinahurricanes.com/",
    "franchiseId" : 26,
    "active" : true
  }, {
    "id" : 13,
    "name" : "Florida Panthers",
    "link" : "/api/v1/teams/13",
    "venue" : {
      "id" : 5027,
      "name" : "BB&T Center",
      "link" : "/api/v1/venues/5027",
      "city" : "Sunrise",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "FLA",
    "teamName" : "Panthers",
    "locationName" : "Florida",
    "firstYearOfPlay" : "1993",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 33,
      "teamName" : "Panthers",
      "link" : "/api/v1/franchises/33"
    },
    "shortName" : "Florida",
    "officialSiteUrl" : "http://www.floridapanthers.com/",
    "franchiseId" : 33,
    "active" : true
  }, {
    "id" : 14,
    "name" : "Tampa Bay Lightning",
    "link" : "/api/v1/teams/14",
    "venue" : {
      "id" : 5017,
      "name" : "Amalie Arena",
      "link" : "/api/v1/venues/5017",
      "city" : "Tampa",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "TBL",
    "teamName" : "Lightning",
    "locationName" : "Tampa Bay",
    "firstYearOfPlay" : "1991",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 31,
      "teamName" : "Lightning",
      "link" : "/api/v1/franchises/31"
    },
    "shortName" : "Tampa Bay",
    "officialSiteUrl" : "http://www.tampabaylightning.com/",
    "franchiseId" : 31,
    "active" : true
  }, {
    "id" : 15,
    "name" : "Washington Capitals",
    "link" : "/api/v1/teams/15",
    "venue" : {
      "id" : 5094,
      "name" : "Capital One Arena",
      "link" : "/api/v1/venues/5094",
      "city" : "Washington",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "WSH",
    "teamName" : "Capitals",
    "locationName" : "Washington",
    "firstYearOfPlay" : "1974",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 24,
      "teamName" : "Capitals",
      "link" : "/api/v1/franchises/24"
    },
    "shortName" : "Washington",
    "officialSiteUrl" : "http://www.washingtoncapitals.com/",
    "franchiseId" : 24,
    "active" : true
  }, {
    "id" : 16,
    "name" : "Chicago Blackhawks",
    "link" : "/api/v1/teams/16",
    "venue" : {
      "id" : 5092,
      "name" : "United Center",
      "link" : "/api/v1/venues/5092",
      "city" : "Chicago",
      "timeZone" : {
        "id" : "America/Chicago",
        "offset" : -6,
        "tz" : "CST"
      }
    },
    "abbreviation" : "CHI",
    "teamName" : "Blackhawks",
    "locationName" : "Chicago",
    "firstYearOfPlay" : "1926",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 11,
      "teamName" : "Blackhawks",
      "link" : "/api/v1/franchises/11"
    },
    "shortName" : "Chicago",
    "officialSiteUrl" : "http://www.chicagoblackhawks.com/",
    "franchiseId" : 11,
    "active" : true
  }, {
    "id" : 17,
    "name" : "Detroit Red Wings",
    "link" : "/api/v1/teams/17",
    "venue" : {
      "id" : 5145,
      "name" : "Little Caesars Arena",
      "link" : "/api/v1/venues/5145",
      "city" : "Detroit",
      "timeZone" : {
        "id" : "America/Detroit",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "DET",
    "teamName" : "Red Wings",
    "locationName" : "Detroit",
    "firstYearOfPlay" : "1926",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 12,
      "teamName" : "Red Wings",
      "link" : "/api/v1/franchises/12"
    },
    "shortName" : "Detroit",
    "officialSiteUrl" : "http://www.detroitredwings.com/",
    "franchiseId" : 12,
    "active" : true
  }, {
    "id" : 18,
    "name" : "Nashville Predators",
    "link" : "/api/v1/teams/18",
    "venue" : {
      "id" : 5030,
      "name" : "Bridgestone Arena",
      "link" : "/api/v1/venues/5030",
      "city" : "Nashville",
      "timeZone" : {
        "id" : "America/Chicago",
        "offset" : -6,
        "tz" : "CST"
      }
    },
    "abbreviation" : "NSH",
    "teamName" : "Predators",
    "locationName" : "Nashville",
    "firstYearOfPlay" : "1997",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 34,
      "teamName" : "Predators",
      "link" : "/api/v1/franchises/34"
    },
    "shortName" : "Nashville",
    "officialSiteUrl" : "http://www.nashvillepredators.com/",
    "franchiseId" : 34,
    "active" : true
  }, {
    "id" : 19,
    "name" : "St. Louis Blues",
    "link" : "/api/v1/teams/19",
    "venue" : {
      "id" : 5076,
      "name" : "Enterprise Center",
      "link" : "/api/v1/venues/5076",
      "city" : "St. Louis",
      "timeZone" : {
        "id" : "America/Chicago",
        "offset" : -6,
        "tz" : "CST"
      }
    },
    "abbreviation" : "STL",
    "teamName" : "Blues",
    "locationName" : "St. Louis",
    "firstYearOfPlay" : "1967",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 18,
      "teamName" : "Blues",
      "link" : "/api/v1/franchises/18"
    },
    "shortName" : "St Louis",
    "officialSiteUrl" : "http://www.stlouisblues.com/",
    "franchiseId" : 18,
    "active" : true
  }, {
    "id" : 20,
    "name" : "Calgary Flames",
    "link" : "/api/v1/teams/20",
    "venue" : {
      "id" : 5075,
      "name" : "Scotiabank Saddledome",
      "link" : "/api/v1/venues/5075",
      "city" : "Calgary",
      "timeZone" : {
        "id" : "America/Denver",
        "offset" : -7,
        "tz" : "MST"
      }
    },
    "abbreviation" : "CGY",
    "teamName" : "Flames",
    "locationName" : "Calgary",
    "firstYearOfPlay" : "1980",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 21,
      "teamName" : "Flames",
      "link" : "/api/v1/franchises/21"
    },
    "shortName" : "Calgary",
    "officialSiteUrl" : "http://www.calgaryflames.com/",
    "franchiseId" : 21,
    "active" : true
  }, {
    "id" : 21,
    "name" : "Colorado Avalanche",
    "link" : "/api/v1/teams/21",
    "venue" : {
      "id" : 5064,
      "name" : "Pepsi Center",
      "link" : "/api/v1/venues/5064",
      "city" : "Denver",
      "timeZone" : {
        "id" : "America/Denver",
        "offset" : -7,
        "tz" : "MST"
      }
    },
    "abbreviation" : "COL",
    "teamName" : "Avalanche",
    "locationName" : "Colorado",
    "firstYearOfPlay" : "1979",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 27,
      "teamName" : "Avalanche",
      "link" : "/api/v1/franchises/27"
    },
    "shortName" : "Colorado",
    "officialSiteUrl" : "http://www.coloradoavalanche.com/",
    "franchiseId" : 27,
    "active" : true
  }, {
    "id" : 22,
    "name" : "Edmonton Oilers",
    "link" : "/api/v1/teams/22",
    "venue" : {
      "id" : 5100,
      "name" : "Rogers Place",
      "link" : "/api/v1/venues/5100",
      "city" : "Edmonton",
      "timeZone" : {
        "id" : "America/Edmonton",
        "offset" : -7,
        "tz" : "MST"
      }
    },
    "abbreviation" : "EDM",
    "teamName" : "Oilers",
    "locationName" : "Edmonton",
    "firstYearOfPlay" : "1979",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 25,
      "teamName" : "Oilers",
      "link" : "/api/v1/franchises/25"
    },
    "shortName" : "Edmonton",
    "officialSiteUrl" : "http://www.edmontonoilers.com/",
    "franchiseId" : 25,
    "active" : true
  }, {
    "id" : 23,
    "name" : "Vancouver Canucks",
    "link" : "/api/v1/teams/23",
    "venue" : {
      "id" : 5073,
      "name" : "Rogers Arena",
      "link" : "/api/v1/venues/5073",
      "city" : "Vancouver",
      "timeZone" : {
        "id" : "America/Vancouver",
        "offset" : -8,
        "tz" : "PST"
      }
    },
    "abbreviation" : "VAN",
    "teamName" : "Canucks",
    "locationName" : "Vancouver",
    "firstYearOfPlay" : "1970",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 20,
      "teamName" : "Canucks",
      "link" : "/api/v1/franchises/20"
    },
    "shortName" : "Vancouver",
    "officialSiteUrl" : "http://www.canucks.com/",
    "franchiseId" : 20,
    "active" : true
  }, {
    "id" : 24,
    "name" : "Anaheim Ducks",
    "link" : "/api/v1/teams/24",
    "venue" : {
      "id" : 5046,
      "name" : "Honda Center",
      "link" : "/api/v1/venues/5046",
      "city" : "Anaheim",
      "timeZone" : {
        "id" : "America/Los_Angeles",
        "offset" : -8,
        "tz" : "PST"
      }
    },
    "abbreviation" : "ANA",
    "teamName" : "Ducks",
    "locationName" : "Anaheim",
    "firstYearOfPlay" : "1993",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 32,
      "teamName" : "Ducks",
      "link" : "/api/v1/franchises/32"
    },
    "shortName" : "Anaheim",
    "officialSiteUrl" : "http://www.anaheimducks.com/",
    "franchiseId" : 32,
    "active" : true
  }, {
    "id" : 25,
    "name" : "Dallas Stars",
    "link" : "/api/v1/teams/25",
    "venue" : {
      "id" : 5019,
      "name" : "American Airlines Center",
      "link" : "/api/v1/venues/5019",
      "city" : "Dallas",
      "timeZone" : {
        "id" : "America/Chicago",
        "offset" : -6,
        "tz" : "CST"
      }
    },
    "abbreviation" : "DAL",
    "teamName" : "Stars",
    "locationName" : "Dallas",
    "firstYearOfPlay" : "1967",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 15,
      "teamName" : "Stars",
      "link" : "/api/v1/franchises/15"
    },
    "shortName" : "Dallas",
    "officialSiteUrl" : "http://www.dallasstars.com/",
    "franchiseId" : 15,
    "active" : true
  }, {
    "id" : 26,
    "name" : "Los Angeles Kings",
    "link" : "/api/v1/teams/26",
    "venue" : {
      "name" : "STAPLES Center",
      "link" : "/api/v1/venues/null",
      "city" : "Los Angeles",
      "timeZone" : {
        "id" : "America/Los_Angeles",
        "offset" : -8,
        "tz" : "PST"
      }
    },
    "abbreviation" : "LAK",
    "teamName" : "Kings",
    "locationName" : "Los Angeles",
    "firstYearOfPlay" : "1967",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 14,
      "teamName" : "Kings",
      "link" : "/api/v1/franchises/14"
    },
    "shortName" : "Los Angeles",
    "officialSiteUrl" : "http://www.lakings.com/",
    "franchiseId" : 14,
    "active" : true
  }, {
    "id" : 28,
    "name" : "San Jose Sharks",
    "link" : "/api/v1/teams/28",
    "venue" : {
      "name" : "SAP Center at San Jose",
      "link" : "/api/v1/venues/null",
      "city" : "San Jose",
      "timeZone" : {
        "id" : "America/Los_Angeles",
        "offset" : -8,
        "tz" : "PST"
      }
    },
    "abbreviation" : "SJS",
    "teamName" : "Sharks",
    "locationName" : "San Jose",
    "firstYearOfPlay" : "1990",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 29,
      "teamName" : "Sharks",
      "link" : "/api/v1/franchises/29"
    },
    "shortName" : "San Jose",
    "officialSiteUrl" : "http://www.sjsharks.com/",
    "franchiseId" : 29,
    "active" : true
  }, {
    "id" : 29,
    "name" : "Columbus Blue Jackets",
    "link" : "/api/v1/teams/29",
    "venue" : {
      "id" : 5059,
      "name" : "Nationwide Arena",
      "link" : "/api/v1/venues/5059",
      "city" : "Columbus",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -5,
        "tz" : "EST"
      }
    },
    "abbreviation" : "CBJ",
    "teamName" : "Blue Jackets",
    "locationName" : "Columbus",
    "firstYearOfPlay" : "1997",
    "division" : {
      "id" : 18,
      "name" : "Metropolitan",
      "nameShort" : "Metro",
      "link" : "/api/v1/divisions/18",
      "abbreviation" : "M"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 36,
      "teamName" : "Blue Jackets",
      "link" : "/api/v1/franchises/36"
    },
    "shortName" : "Columbus",
    "officialSiteUrl" : "http://www.bluejackets.com/",
    "franchiseId" : 36,
    "active" : true
  }, {
    "id" : 30,
    "name" : "Minnesota Wild",
    "link" : "/api/v1/teams/30",
    "venue" : {
      "id" : 5098,
      "name" : "Xcel Energy Center",
      "link" : "/api/v1/venues/5098",
      "city" : "St. Paul",
      "timeZone" : {
        "id" : "America/Chicago",
        "offset" : -6,
        "tz" : "CST"
      }
    },
    "abbreviation" : "MIN",
    "teamName" : "Wild",
    "locationName" : "Minnesota",
    "firstYearOfPlay" : "1997",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 37,
      "teamName" : "Wild",
      "link" : "/api/v1/franchises/37"
    },
    "shortName" : "Minnesota",
    "officialSiteUrl" : "http://www.wild.com/",
    "franchiseId" : 37,
    "active" : true
  }, {
    "id" : 52,
    "name" : "Winnipeg Jets",
    "link" : "/api/v1/teams/52",
    "venue" : {
      "id" : 5058,
      "name" : "Bell MTS Place",
      "link" : "/api/v1/venues/5058",
      "city" : "Winnipeg",
      "timeZone" : {
        "id" : "America/Winnipeg",
        "offset" : -6,
        "tz" : "CST"
      }
    },
    "abbreviation" : "WPG",
    "teamName" : "Jets",
    "locationName" : "Winnipeg",
    "firstYearOfPlay" : "2011",
    "division" : {
      "id" : 16,
      "name" : "Central",
      "nameShort" : "CEN",
      "link" : "/api/v1/divisions/16",
      "abbreviation" : "C"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 35,
      "teamName" : "Jets",
      "link" : "/api/v1/franchises/35"
    },
    "shortName" : "Winnipeg",
    "officialSiteUrl" : "http://winnipegjets.com/",
    "franchiseId" : 35,
    "active" : true
  }, {
    "id" : 53,
    "name" : "Arizona Coyotes",
    "link" : "/api/v1/teams/53",
    "venue" : {
      "id" : 5043,
      "name" : "Gila River Arena",
      "link" : "/api/v1/venues/5043",
      "city" : "Glendale",
      "timeZone" : {
        "id" : "America/Phoenix",
        "offset" : -7,
        "tz" : "MST"
      }
    },
    "abbreviation" : "ARI",
    "teamName" : "Coyotes",
    "locationName" : "Arizona",
    "firstYearOfPlay" : "1979",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 28,
      "teamName" : "Coyotes",
      "link" : "/api/v1/franchises/28"
    },
    "shortName" : "Arizona",
    "officialSiteUrl" : "http://www.arizonacoyotes.com/",
    "franchiseId" : 28,
    "active" : true
  }, {
    "id" : 54,
    "name" : "Vegas Golden Knights",
    "link" : "/api/v1/teams/54",
    "venue" : {
      "id" : 5178,
      "name" : "T-Mobile Arena",
      "link" : "/api/v1/venues/5178",
      "city" : "Las Vegas",
      "timeZone" : {
        "id" : "America/Los_Angeles",
        "offset" : -8,
        "tz" : "PST"
      }
    },
    "abbreviation" : "VGK",
    "teamName" : "Golden Knights",
    "locationName" : "Vegas",
    "firstYearOfPlay" : "2016",
    "division" : {
      "id" : 15,
      "name" : "Pacific",
      "nameShort" : "PAC",
      "link" : "/api/v1/divisions/15",
      "abbreviation" : "P"
    },
    "conference" : {
      "id" : 5,
      "name" : "Western",
      "link" : "/api/v1/conferences/5"
    },
    "franchise" : {
      "franchiseId" : 38,
      "teamName" : "Golden Knights",
      "link" : "/api/v1/franchises/38"
    },
    "shortName" : "Vegas",
    "officialSiteUrl" : "http://www.vegasgoldenknights.com/",
    "franchiseId" : 38,
    "active" : true
  } ]
}



I'd like to create dynamically a html table from that info and I would be grateful if someone could show me an example of how to do it. Maybe I'd understand how to do it with other json files also.

Is This A Good Question/Topic? 0
  • +

Replies To: Html table from json

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14852
  • View blog
  • Posts: 59,263
  • Joined: 12-June 08

Re: Html table from json

Posted 25 February 2019 - 10:52 AM

Side question - any particular reason you wouldn't dump that data into a DB attached to your webserver, and use a server side language (like php, ruby, python, ASP.NET, etc) to pull it?
Was This Post Helpful? 0
  • +
  • -

#3 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 25 February 2019 - 11:13 AM

View Postmodi123_1, on 25 February 2019 - 10:52 AM, said:

Side question - any particular reason you wouldn't dump that data into a DB attached to your webserver, and use a server side language (like php, ruby, python, ASP.NET, etc) to pull it?


Well, no particular reason. Those languages are strange to me but I think I could do it with node.js? Why do you recommend using a DB for this operation, would it make things simpler? I'd still like to learn how to make a table from json file though. Thank you for your quick response!
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14852
  • View blog
  • Posts: 59,263
  • Joined: 12-June 08

Re: Html table from json

Posted 25 February 2019 - 12:28 PM

A web DB (mysql, maria, MSSQL) allow for multiple, unhindered, sources pulling it. Not to mention the benefit of a DB for organizing data in a functional structure. A flat file may run into issues to concurrent users accessing it, accessing it when being updated, no structure, etc.

Reading a file can be done with jquery pretty easily.
https://www.sitepoin...read-text-file/
Was This Post Helpful? 1
  • +
  • -

#5 DarenR   User is offline

  • D.I.C Lover

Reputation: 598
  • View blog
  • Posts: 3,883
  • Joined: 12-January 10

Re: Html table from json

Posted 25 February 2019 - 12:38 PM

View Postmodi123_1, on 25 February 2019 - 02:28 PM, said:

A web DB (mysql, maria, MSSQL) allow for multiple, unhindered, sources pulling it. Not to mention the benefit of a DB for organizing data in a functional structure. A flat file may run into issues to concurrent users accessing it, accessing it when being updated, no structure, etc.

Reading a file can be done with jquery pretty easily.
https://www.sitepoin...read-text-file/



and dont forget historical data being accumulated which is a great benefit down the road
Was This Post Helpful? 1
  • +
  • -

#6 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 25 February 2019 - 01:01 PM

Thank you for your answers, I will look into database if I could solve my problem with that.
Was This Post Helpful? 0
  • +
  • -

#7 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 27 February 2019 - 11:56 AM

Ok, this is my code now:

server.js:

const express = require('express')
const axios = require('axios')
const app = express()
const path = require('path');
const router = express.Router();
const fs = require("fs");
var db = require('./db')
var json = require('./JSONdata')

app.use(express.static(__dirname + '/public'));

router.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/index.html'));
});


const api = axios.get('https://statsapi.web.nhl.com/api/v1/teams').then(response => {
  fs.writeFileSync("./JSONdata.json", JSON.stringify(response.data, null, "\t"))
  db.query("CREATE DATABASE node_test", function(err, result) {
    if (err) throw err;
    console.log('Database created!');
    db.query("INSERT INTO node_test(name, abbreviation) VALUES ('"+JSONdata.json+"')", function(queryError, queryResult) {
      if(queryError) throw queryError;
    });
  });
  db.end()
});


app.use('/', router);


app.listen(process.env.port || 2000);
console.log('Running at port 2000');




db.js:

var mysql = require('mysql');

var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'node'
});

connection.connect(function(err) {
    if (err) throw err;
    console.log('DB connected!')
});

module.exports = connection;



It makes a connection to DB and creates a table without problem. I just can't get to work the part where I'm trying to put the data from my JSONdata.json file to DB. Any suggestions what I'm doing wrong? I'd also like to check if the database I'm creating already exists because now the program crashes when running that code and DB with the same already exists.
Was This Post Helpful? 0
  • +
  • -

#8 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14852
  • View blog
  • Posts: 59,263
  • Joined: 12-June 08

Re: Html table from json

Posted 27 February 2019 - 12:03 PM

First up.. your code should not be creating the db table. It should already exist and be created in phpadmin or what ever db management tool you got going on.

If you need to clear out data then you use the SQL DELETE or TRUNCATE depending on your needs.

Preferably your INSERT would list the columns inserting and in the 'VALUES' part have each value you want into those corresponding columns.. broken up.

ex:

INSERT INTO #FOO(lVal, sVal)
VALUES (1, 'one')

Was This Post Helpful? 1
  • +
  • -

#9 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 27 February 2019 - 12:19 PM

I must have misunderstood your original advice because what I wanted to do was to create a JSON -file from api data and show some of that data in my html file. I thought you said it's better to put that JSON data first to DB and pull it from there to my html page. Could you please tell me why it's not good to create a table in code?
Was This Post Helpful? 0
  • +
  • -

#10 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14852
  • View blog
  • Posts: 59,263
  • Joined: 12-June 08

Re: Html table from json

Posted 27 February 2019 - 12:22 PM

You already mentioned it.. creating a table over and over again causes errors if you don't catch it. Then there's the security aspect. Creating/destorying tables is a higher order of privileged than inserting or update data in a table.

A given hosting usually has 'phpadmin' where you can create a table and login information for a database. You would then use that in your code to read/write to.
Was This Post Helpful? 1
  • +
  • -

#11 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 27 February 2019 - 01:40 PM

Thank you again, this is very helpful for me. My next question is how do I keep my DB up to date? Can I do that in my code from my up to date json file?
Was This Post Helpful? 0
  • +
  • -

#12 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14852
  • View blog
  • Posts: 59,263
  • Joined: 12-June 08

Re: Html table from json

Posted 27 February 2019 - 01:48 PM

Depends on how frequently the data needs to be pulled. You can make a server application that does it X times a day... or make yourself a secured login 'admin' page and click a button to do it.. etc.

You most likely wouldn't want it to happen every time a person hits your page.
Was This Post Helpful? 1
  • +
  • -

#13 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7397
  • View blog
  • Posts: 15,330
  • Joined: 16-October 07

Re: Html table from json

Posted 27 February 2019 - 02:02 PM

You've already saved the data. Why keep dipping into the well?

This might be too much, but then again, you don't seem to know where you're going, so:
const express = require('express');
const fs = require("fs");

// since we can fit the whole mess in memory, let's do that
readAllTheData((data) => {
  // make sure we got it
  console.log("data read");
  console.log("team count", data.teams.length);
  const app = express();
  const port = 3000;

  // a couple of pages
  app.get('/', (req, res) => res.send(homePage(data)));
  app.get('/teams', (req, res) => res.send(teamListPage(data)));

  app.listen(port, () => console.log(`Example app listening on port ${port}!`));
  
});

// load all the data
function readAllTheData(callback) {
  fs.readFile("./JSONdata.json", (err, raw) => callback(err ? failOut(err) : JSON.parse(raw)));
  function failOut(err) { console.err(err); return {}; }
}

// simple entry page
// we don't need data here, but we might in the future
function homePage(data) {
  return layout("Home", ["<ul>", "<li><a href='/teams'>Teams</a></li>", "</ul>" ]);
}

// very dumb team list
function teamListPage(data) {
  return layout("Teams", data.teams.map((team) => `<p>${team.name}</p>`));
}

// very dumb layout
function layout(pageName, pageData) {
  return [ 
    "<html>",
    "<head>", "<title>", pageName, "</title>", "</head>",
    "<body>", 
    "<h1>", pageName, "</h1>",
    ...pageData,
    "</body></html>"
  ].join("");
}



Now, given what you have... the nice thing about functions it that they can behave like black boxes. You want to pull from that api every time? You can just put that pull in readAllTheData. e.g.
function readAllTheData(callback) {
  axios.get('https://statsapi.web.nhl.com/api/v1/teams').then(res => callback(JSON.parse(JSON.stringify(res.data))));
}



Note, this is just a proof of concept. Something to get you rolling. You'll want something that's a little more clever about formatting and render pages. I kind of like pug, if you feel like going that route. I'm glad you're thinking of a router: keep going with that.

Hope this helps.
Was This Post Helpful? 1
  • +
  • -

#14 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 27 February 2019 - 02:49 PM

Oh it sure does help, thank you so much! Now I have some serious studying to do because I want understand everything you wrote. About pug, I've been studying it a little and it seems really interesting tool.
I sure am fascinated by all the things possible with node.js!
Was This Post Helpful? 0
  • +
  • -

#15 wantsToCode   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 25-February 19

Re: Html table from json

Posted 28 February 2019 - 10:10 AM

Hi again, hope you're not all fed up with me and my questions. I'd like to know one quick thing. I now can handle the api data and get it on my html page (trying this first before learning more pug). I can even make a table from my data.
My question is, how can I style my data, which is set by this code:

function teamListPage(data) {
34
  return layout("Teams", data.teams.map((team) => `<p>${team.name}</p>`));
35
}



If I make a css file, how do I define it to style this data, in this example that `<p>${team.name}</p>`
Styling the p in css file doesn't seem to do anything.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2