Struggling to show data from javascript in html-CodePudding

Note: I am new to JavaScript and html so there are a lot of things i do not quite understand yet.

I am trying to make a web-application that uses a bus-schedule API to show the bus times around my apartment. I have managed to retrieve the data, but I struggle to display that data in the html.

// this is the function write_bus() in my javascript file departures.js:
function write_bus() {
  document.getElementById("bustime-kong").innerHTML = data;
}

// 'data' is a variable in javascript that contains the information I fetched from the client, and is what I am trying to show.It is on the following format:
const data = {
  aimedArrivalTime: '2022-01-06T12:36:00 0100',
  aimedDepartureTime: '2022-01-06T12:36:00 0100',
  cancellation: false,
  date: '2022-01-06',
  destinationDisplay: {
    frontText: 'xxx'
  },
  expectedDepartureTime: '2022-01-06T12:38:12 0100',
  expectedArrivalTime: '2022-01-06T12:37:32 0100',
  forAlighting: true,
  forBoarding: true,
  notices: [],
  predictionInaccurate: false,
  quay: {
    id: 'xxx',
    name: 'xxx',
    publicCode: 'P2',
    situations: [],
    stopPlace: [Object]
  }
}

<script src="departures.js"></script>
<input type="button" onclick="write_bus()" value="Busstider"> <br>
<div id="bustime-kong"></div>

(In order to save some space i removed 2/3 of the data)

I appreciate every bit of help i could get!

CodePudding user response：

You can't insert raw objects like that as DOM text. You have to use specific properties, but if you are so inclined to insert object like that, use JSON.stringify() method.

document.getElementById("bustime-kong").innerHTML = JSON.stringify(data);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

BTW, It is good practice to put <script> tag at the end to make sure HTML is loaded before running any JavaScript.

CodePudding user response：

You can create a function that will parse through the json and print it in table form like below.

// this is the function write_bus() in my javascript file departures.js:
function write_bus() {
  document.getElementById("bustime-kong").innerHTML = createTable(data);
}

// 'data' is a variable in javascript that contains the information I fetched from the client, and is what I am trying to show.It is on the following format:
const data = {
  aimedArrivalTime: '2022-01-06T12:36:00 0100',
  aimedDepartureTime: '2022-01-06T12:36:00 0100',
  cancellation: false,
  date: '2022-01-06',
  destinationDisplay: {
    frontText: 'xxx'
  },
  expectedDepartureTime: '2022-01-06T12:38:12 0100',
  expectedArrivalTime: '2022-01-06T12:37:32 0100',
  forAlighting: true,
  forBoarding: true,
  notices: [],
  predictionInaccurate: false,
  quay: {
    id: 'xxx',
    name: 'xxx',
    publicCode: 'P2',
    situations: [],
    stopPlace: [Object]
  }
}

function createTable(data){

  var table = "<table>";
  for(var key in data){
    table ="<tr>";
    table ="<td>" key "</td>";
    table ="<td>" data[key] "</td>";
    table ="</tr>";
  }
  table ="</table>";
  return table;
}

<input type="button" onclick="write_bus()" value="Busstider"> <br>
<div id="bustime-kong"></div>

CodePudding user response：

Since it is array of data you need to use Json.stringify method,

document.getElementById("bustime-kong").innerHTML = JSON.stringify(data);