CODEWITHSUNDEEP
javascripthtml
Ruvi
Ruvi

Reputation: 263

Vanilla JS/HTML: best practice to connect html object to internal data-model/array

I have a thumbnail view that has x-items that are internally stored in an array. After the initial request there is no more server communication so everything is handled in the browser afterwards.

In my current solution I give each html thumbnail item the id of their corresponding index inside my internal data model, so that after a click on a thumbnail I know which data to load.

I thought that was a nice idea until I tried to implement the delete operation, so it is possible to delete any item on any position and also to drag and drop thumbnail items around.

So in my current solution i would need to run through every single html thumbnail item after every update to adjust the indexes, which is not a very nice solution.

I do not believe I will ever run in performance problems because it is very doubtful that the thumbnail will contain more then 100 items but I wonder if where is a better solution or a best practice to make it nicer.

I can't influence the datamodel/array in any way or form so a map with uids is not an option, also can't use any framework so a vanilla solution would be required.

<button class="thumbNailItem" id="tni#5"><h3>BOLD</h3><p>My Description</p></button>

this.deleteStep = function() {
  let thumbParent = document.getElementById('thumbNailParent');
  this.curTC.testSteps.splice(this.curStep.index, 1);

  thumbParent.removeChild(thumbNailParent.children[this.curStep.index]);

  //would need to implement loop to correct all 'tni#ids'

  if (this.curStep.index <= thumbParent.children.length) {
    thumbParent.children[this.curStep.index].click();
  }

Upvotes: 0

Views: 295

Answers (1)

JO3-W3B-D3V
JO3-W3B-D3V

Reputation: 2134

Explained

Considering we have very little idea as to what it is exactly that you're looking for, here's a simple enough way in which you can simply handle data, some events and some rendering, using nothing more than native JavaScript.

If you need some documentation to understand this code, I strongly suggest you take a look at MDN, I mean I'd imagine that you can make sense of it for the most part. As stated previously in the comments, to achieve this, I've simply used template literals to handle how the HTML is being rendered.

There are many approaches that you could use to essentially solve the same problem(s), but this one in my opinion is clean, clear and concise as to what is going on. 

(function () {
  "use strict";
  
  // Just some dummy data for the time being. 
  let data = [
    {name: "Jack", age: 18},
    {name: "Leah", age: 32},
    {name: "Jay", age: 45}
  ];
  
  // Simple reference to the app div.
  const app = document.getElementById("app");
  
  // How you want to handle the click event for each button. 
  const handler = e => {
    data.splice(e.target.id, 1);
    render();
  };
  
  // A simple function to handle dispatching the events. 
  const dispatchEvents = () => {
    document.querySelectorAll(".profile button").forEach(btn => btn.onclick = handler);
  };
  
  // A simple render method. 
  const render = () => {
    app.innerHTML = data.map((o, i) => `<div class="profile">
      <p class="username">Name: ${o.name}</p>
      <p class="userage">Age: ${o.age}</p>
      <button id=${i}>DELETE</button>
    </div>`).join("");
    dispatchEvents();
  };
  
  // Initial render. 
  render();
})();
<div id="app"></div>

Upvotes: 1

Related Questions