Как получить данные JS в HTML? - PullRequest
Новая
       28

Как получить данные JS в HTML?

0 голосов
/ 26 сентября 2019

Я пытаюсь перенести мои данные JSON в HTML.Поэтому я использовал данные JSON и сделал их переменными. Затем я назначил больше переменных для доступа к данным каждого элемента, который мне нужен внутри данных JSON.Теперь у меня есть данные в виде переменных, но я не могу передать их в HTML с помощью document.getElementById.Это может быть потому, что у меня разные данные для одной и той же переменной, только последний элемент печатает для Id, поскольку он уникален.Поэтому, пожалуйста, помогите мне узнать, как я могу печатать данные переменных JS в 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>

1 Ответ

0 голосов
/ 26 сентября 2019

Вот пример того, как поместить это в простую таблицу.Как правило, вы можете использовать свойства .innerHTML или .innerText для динамического добавления элементов в ваш 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;

	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>
...