невозможно вывести html контент на страницу из обратного вызова foreach в javascript - PullRequest
Новая
       4

невозможно вывести html контент на страницу из обратного вызова foreach в javascript

0 голосов
/ 03 февраля 2020

У меня есть функция, которая зацикливается на каждом элементе массива и выводит содержимое html на страницу, изменяя некоторые свойства с элементами из массива. Я использую forEach для l oop над элементами массива и innerHTML для печати содержимого на странице.

Я получаю следующую ошибку: netdata.html:41 Uncaught TypeError: Cannot set property 'innerHTML' of null. Я не уверен, что вызывает это, поскольку у меня есть элемент с правильным идентификатором, <div id="info"></div>

const clusterIPs = [
      { name: "eco-cluster-1", ip: "192.168.50.101" },
      { name: "eco-cluster-2", ip: "192.168.50.102" },
      { name: "eco-cluster-3", ip: "192.168.50.103" },
      { name: "eco-cluster-4", ip: "192.168.50.104" },
      { name: "eco-cluster-6", ip: "192.168.50.105" },
      { name: "eco-cluster-7", ip: "192.168.50.106" },
      { name: "eco-cluster-8", ip: "192.168.50.107" },
      { name: "eco-cluster-9", ip: "192.168.50.108" },
      { name: "eco-cluster-10", ip: "192.168.50.110" },
      { name: "eco-cluster-11", ip: "192.168.50.111" },
      { name: "eco-cluster-12", ip: "192.168.50.112" },
      { name: "eco-cluster-13", ip: "192.168.50.113" }
    ];

    clusterIPs.forEach(pc => {
      console.log(pc);

      //   $("body").html

      document.getElementById("info").innerHTML = `
        <div class="container-fluid">
        <div><h1>${pc.name}</h1></div>
        <div class="row">
        <div class="col-md">
          <div
            data-title="CPU"
            data-netdata="system.cpu"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="RAM"
            data-netdata="system.ram"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md">
          <div
            data-title="Disk I/O"
            data-netdata="system.io"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="Network Bandwidth"
            data-netdata="system.net"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
    </div>
        `;
    });
    //   console.log(clusterIPs)

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

Вы

  1. Добавляете HTML до того, как контейнер существует.
  2. Замена HTML каждый раз в l oop вместо добавления

Для использования внутреннего HTML вы можете сделать 

window.addEventListener("load",function() {
  const container = document.getElementById("info");
  clusterIPs.forEach(pc => container.innerHTML += `....`);
})

Или использовать jQuery для добавления, так как вы уже загрузили его 

$(function() { // on page load
  const $container = $("#info");
  $.each(clusterIPs,(i, pc) => {
    $container.append(`....`);
  });
});


    const clusterIPs = [
      { name: "eco-cluster-1", ip: "192.168.50.101" },
      { name: "eco-cluster-2", ip: "192.168.50.102" },
      { name: "eco-cluster-3", ip: "192.168.50.103" },
      { name: "eco-cluster-4", ip: "192.168.50.104" },
      { name: "eco-cluster-6", ip: "192.168.50.105" },
      { name: "eco-cluster-7", ip: "192.168.50.106" },
      { name: "eco-cluster-8", ip: "192.168.50.107" },
      { name: "eco-cluster-9", ip: "192.168.50.108" },
      { name: "eco-cluster-10", ip: "192.168.50.110" },
      { name: "eco-cluster-11", ip: "192.168.50.111" },
      { name: "eco-cluster-12", ip: "192.168.50.112" },
      { name: "eco-cluster-13", ip: "192.168.50.113" }
    ];


$(function() { // on page load
  const $container = $("#info");
  $.each(clusterIPs,(i, pc) => {
    $container.append(`
        <div class="container-fluid">
        <div><h1>${pc.name}</h1></div>
        <div class="row">
        <div class="col-md">
          <div
            data-title="CPU"
            data-netdata="system.cpu"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="RAM"
            data-netdata="system.ram"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md">
          <div
            data-title="Disk I/O"
            data-netdata="system.io"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="Network Bandwidth"
            data-netdata="system.net"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
    </div>`)
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<div id="info"></div>

<script type="text/javascript" src="http://localhost:19999/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
0 голосов
/ 03 февраля 2020

Элемент div#info недоступен при запуске скрипта. Есть несколько способов решить эту проблему:

  1. Добавьте прослушиватель событий DOMContentLoaded к объекту document, затем в обратном вызове запустите существующий сценарий.
  2. Добавьте тег <script>, содержащий существующий скрипт ПОСЛЕ элемента div#info.
  3. Измените сценарий, который вы написали. Я бы лично написал это:

Компонент, представляющий HTML Элемент 

class Component {
  constructor() {}
  get element() {
    if(this._element) return this._element
    this._element = document.createElement('div')
    this._element.setAttribute('id', 'info')
    return this._element
  }
  get data() { return [
    { name: "eco-cluster-1", ip: "192.168.50.101" },
    { name: "eco-cluster-2", ip: "192.168.50.102" },
    { name: "eco-cluster-3", ip: "192.168.50.103" },
    { name: "eco-cluster-4", ip: "192.168.50.104" },
    { name: "eco-cluster-6", ip: "192.168.50.105" },
    { name: "eco-cluster-7", ip: "192.168.50.106" },
    { name: "eco-cluster-8", ip: "192.168.50.107" },
    { name: "eco-cluster-9", ip: "192.168.50.108" },
    { name: "eco-cluster-10", ip: "192.168.50.110" },
    { name: "eco-cluster-11", ip: "192.168.50.111" },
    { name: "eco-cluster-12", ip: "192.168.50.112" },
    { name: "eco-cluster-13", ip: "192.168.50.113" }
  ] }
  get template() { return (pc) => `
    <div class="container-fluid">
      <div><h1>${pc.name}</h1></div>
      <div class="row">
        <div class="col-md">
          <div
            data-title="CPU"
            data-netdata="system.cpu"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="RAM"
            data-netdata="system.ram"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md">
          <div
            data-title="Disk I/O"
            data-netdata="system.io"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="Network Bandwidth"
            data-netdata="system.net"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
    </div>
  ` }
  insertElement() {
    document.querySelector('body')
      .insertAdjacentElement('afterbegin', this.element)
    return this
  }
  clearElement() {
    this.element.innerHTML = ''
    return this
  }
  render() {
    if(!this.element.parentElement) {
      this.insertElement()
    } else {
      this.clearElement()
    }
    this.data.forEach((dataItem) => {
      let template = document.createRange().createContextualFragment(
        this.template(dataItem)
      )
      this.element.appendChild(template)
    })
    return this
  }
}

Instantiate Component 

document.addEventListener('DOMContentLoaded', (event) => {
  let component = new Component()
  component.render()
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...