What is the best way to transfer JavaScript data to HTML?

Question

What is the best way to transfer JavaScript data to HTML?

I'm having trouble displaying my JSON data in HTML. I converted the JSON data into variables and created additional variables to access specific elements within the JSON data. However, when trying to pass this data to HTML using document.getElementById, only the last element is being printed as the Id is unique. Can someone please assist me with a solution for displaying JavaScript variable data in HTML?

var obj = [{
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "hey there",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "welcome",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "Help me",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  }
];

for (var i in obj) {
  var type = obj[i].type;

  var text = obj[i].text;

  var source_team = obj[i].source_team;

  var user_profile = obj[i].user_profile;

  var real_name = user_profile.real_name;


  console.log(source_team + " : " + real_name);

  console.log(text);

  document.getElementsByClassName('a1').innerHTML = text;
}

<h2>Convert a string written in JSON format, into a JavaScript object.</h2>

<p id="output"></p>
<p class="a1"></p>

javascript arrays json multidimensional-array

Answer 1

Answer №1

Below is a demonstration of how you can organize this data in a basic table layout. Typically, the .innerHTML or .innerText properties are utilized to dynamically insert elements into your HTML structure:

var obj = [{
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "hey there",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  }, 
  // Additional objects...
];

for (var i in obj) {
  var type = obj[i].type;
  var text = obj[i].text;
  var source_team = obj[i].source_team;
  var user_profile = obj[i].user_profile;
  var real_name = user_profile.real_name;

  var message = document.createElement("tr");
  message.innerHTML =
  "<td>" + type +
    "</td><td>" + text +
    "</td><td>" + source_team +
    "</td><td>" + user_profile +
    "</td><td>" + real_name + "</td>";

  document.getElementsByClassName('a1')[0].append(message);

}

table, th, td{
  border: 1px solid black;
}

<p id="output"></p>
<table class="a1">
  <th>Type</th>
  <th>Text</th>
  <th>Source Team</th>
  <th>User Profile</th>
  <th>Real Name</th>
</table>

Answer 2

Below is a demonstration of how you can organize this data in a basic table layout. Typically, the .innerHTML or .innerText properties are utilized to dynamically insert elements into your HTML structure:

var obj = [{
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "hey there",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  }, 
  // Additional objects...
];

for (var i in obj) {
  var type = obj[i].type;
  var text = obj[i].text;
  var source_team = obj[i].source_team;
  var user_profile = obj[i].user_profile;
  var real_name = user_profile.real_name;

  var message = document.createElement("tr");
  message.innerHTML =
  "<td>" + type +
    "</td><td>" + text +
    "</td><td>" + source_team +
    "</td><td>" + user_profile +
    "</td><td>" + real_name + "</td>";

  document.getElementsByClassName('a1')[0].append(message);

}

table, th, td{
  border: 1px solid black;
}

<p id="output"></p>
<table class="a1">
  <th>Type</th>
  <th>Text</th>
  <th>Source Team</th>
  <th>User Profile</th>
  <th>Real Name</th>
</table>

What is the best way to transfer JavaScript data to HTML?

Answer №1

Similar questions

Check if a JSON object is encompassed within another JSON object

A tool for viewing JSON files and retrieving specific data by using a key within the JSON structure

Receiving JSON output twice

The data from the Ajax request failed to display in the table

Typescript Angular filters stop functioning properly post minification

Using local storage with github sites can lead to some unexpected and peculiar behavior

Is CakePHP unable to handle multiple Ajax requests simultaneously?

Problem encountered with sorting single and double digit numbers using NSSortDescriptor

How to reference a variable name within a JSON selector in AngularJS

Retrieving a JSON array and showcasing the outcomes from it

No output being generated by form

Refresh the module.exports in a Mocha unit testing script

JavaScript problem indicating an error that is not a function

Restrict the quantity of items retrieved from an AJAX response

Issue with Ext JS: The property 'substring' is being attempted to be read from an undefined value

Is there a way to identify a visitor's country and automatically direct them to a relevant website?

Webpack in Vuejs does not have access to the keys defined in dev.env.js file

What is the most efficient method for sending query parameters through a URL in Vue.js with Axios?

How to manage the state when multiple forms are generated by clicking a button

Trouble receiving a reply from the Angular controller