CODEWITHSUNDEEP
javascriptjquery
jaap klaas
jaap klaas

Reputation: 57

Update the dom instead of append with jQuery

I have a question about jQuery: I now render content from an array to the dom with:

errors.forEach(error => {
  let message = error.message;
  let fileName = error.fileName;
  $('.errors').append("<li class=\"error-item\">".concat(fileName, " : ").concat(message, "</li><br>"));
});

but I got some actions that update the array where I render the content from, but when I run this function after the update of the array, it appends. I use the .empty() before now but that feels like a hack around but I want it to update

I hope this make sense

What can I do that it updates the dom instead of appending?

I hope someone can help me with this

Upvotes: 2

Views: 343

Answers (1)

zer00ne
zer00ne

Reputation: 43910

The jQuery method .html() overwrites the content of the targeted element(s) with a given htmlString. The following demo function logger() will accept an array of objects and render the data in a <ul>.

let failData = [{
    DOM: '.fail',
    title: 'Errors: ',
    header: ['File', 'Message']
  },
  {
    item: '12ffda8a99.log',
    message: 'Connection failed'
  },
  {
    item: 'bb6200c400.log',
    message: 'Corrupted download'
  },
  {
    item: 'd93ba66731.log',
    message: 'Encryption key needed'
  },
  {
    item: '08caa5240f.log',
    message: 'Mismatched certification'
  },
  {
    item: 'dead0b8a99.log',
    message: 'Insecure protocol'
  }
];

let warnData = [{
    DOM: '.warn',
    title: 'Alerts: ',
    header: ['System', 'Message']
  },
  {
    item: 'network',
    message: '1GB of data left before limit is exceeded'
  },
  {
    item: 'file',
    message: '1GB of storage left before partition is full'
  },
  {
    item: 'power',
    message: '5% of battery remains'
  }
];

let infoData = [{
    DOM: '.info',
    title: 'Updates: ',
    header: ['Priority', 'Message']
  },
  {
    item: 'critical',
    message: 'Anti-virus update required'
  },
  {
    item: 'optional',
    message: 'Media encoding update available'
  }
];

const logger = array => {
  let html = '';
  let list;
  for (let [index, object] of array.entries()) {
    list = $(array[0].DOM);
    if (index === 0) {
      list.prev('header').html(`<u><b>${object.title}</b><output>${array.length-1}</output></u><u><b>${object.header[0]}</b><b>${object.header[1]}</b></u>`);
    } else {
      html += `<li><b>${object.item}</b><b>${object.message}</b></li>`;
    }
  }
  list.html(html);
  return false;
}

logger(failData);
logger(warnData);
logger(infoData);
header {
  margin: 10px 0 -15px;
}

ul {
  padding: 5px 0 10px;
  border: 3px ridge #777;
  overflow-y: hidden;
}

ul,
header {
  display: table;
  table-layout: fixed;
  width: 90%;
}

li,
u {
  display: table-row;
}

b {
  display: table-cell;
  width: 50%;
  border-bottom: 1px solid #000;
  padding-left:5px
}

output {
  display: inline-block;
  width: 10ch;
}
<main>
  <section class='logs'>
    <header></header>
    <ul class='fail'></ul>
    <header></header>
    <ul class='warn'></ul>
    <header></header>
    <ul class='info'></ul>
  </section>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions