How can i replace multiple specific strings in an array with objects using one function?

Question

this is what the table looks like

When i press book (in Granbo row), I want the field in Granbo-row (under "vinter") to change to "utleid"(means "not availible" in norwegian). I can hardcode it for every single row like this:

       function book(){
        main.innerHTML = " "

        for(i = 0; i < hytte.length; i++){
        hytte[1].vinterferie = "utleid";
        main.innerHTML += `
        <tr style="background-color: grey;">
        <td>${hytte[i].navn}</td>
        <td>${hytte[i].jul}</td>
        <td>${hytte[i].vinterferie}</td>
        <td>${hytte[i].paske}</td>
        </tr>
        `
      }

But I want to have just one function that works for all of the fields.

this is an example of 1 object in the array:

      let hytte = [
        {
        navn: "Granstua",
        jul: "utleid",
        vinterferie: "utleid",
        paske: "ledig",
        plasser: 4,
        stand: "hoy",
        bad: "ja",
        book: `<button onclick="book()">Book</button>`
      },

I know its probably hard to understand.

Unknown · Accepted Answer · 2019-12-07 12:33:34Z

Edtied :

Here is high level concept demonstration of what i meant previously. It shows both "Book" & "UnBook" functionality. I request you to just grasp the concept and modify it to based on your requirement.

Note : This sample only shows for one category(VinterfeireTider). Rest you have to decide on how to take it further. And don't forget to modify it to your requirement.

<script>

function getAllData(){
    let hytte = [
    {
    sno:1, // introduce a sequence number for all objects in array
    navn: "Granstua",
    jul: "utleid",
    vinterferie: "utleid",
    paske: "ledig",
    plasser: 4,
    stand: "hoy",
    bad: "ja"
  },{
    sno:2, // introduce a sequence number for all objects in array
    navn: "Granbo",
    jul: "utleid",
    vinterferie: "ledig",
    paske: "ledig",
    plasser: 4,
    stand: "hoy",
    bad: "ja"
  },{
    sno:3, // introduce a sequence number for all objects in array
    navn: "Grantoppen",
    jul: "utleid",
    vinterferie: "ledig",
    paske: "ledig",
    plasser: 4,
    stand: "hoy",
    bad: "ja"
  },{
    sno:4, // introduce a sequence number for all objects in array
    navn: "Granhaug",
    jul: "utleid",
    vinterferie: "ledig",
    paske: "ledig",
    plasser: 4,
    stand: "hoy",
    bad: "ja"
  }];
  return hytte;
}

window.onload = function(){
    loadAllData();
}

function loadAllData(){
    let data = getAllData();
        let tBody1 = document.getElementById("tbody1");
        let tBody2 = document.getElementById("tbody2");
        let tBody1Data = "";
        let tBody2Data = "";
        let columnToUpdate = 2; // you need to decide this dynamically based on how you have built your HTML file.
    for(let i=0;i<data.length;i++){
        tBody1Data += tr(td(data[i].navn) + td(data[i].jul) + td(data[i].vinterferie) + td(data[i].paske))
        let button = "";
        if(data[i].vinterferie.toLowerCase() === "ledig"){
            button = '<button onclick="book(this,' + i + ',' + columnToUpdate + ')">Book</button>';
        }
        else if(data[i].vinterferie.toLowerCase() === "utleid"){
            button = '<button onclick="unBook(this,' + i + ',' + columnToUpdate + ')">UnBook</button>';
        }
        tBody2Data += tr(td(data[i].navn) + td(data[i].plasser) + td(data[i].stand) + td(data[i].bad) + td(button))
    }
    tBody1.innerHTML = tBody1Data;
    tBody2.innerHTML = tBody2Data;
}

function tr(value){
    return '<tr>' + value + '</tr>'
}

function td(value){
    return '<td>' + value + '</td>'
}

function book(btn, sno, col){
  updateStatus(sno, col, "utleid")
  changeButtonBehaviour(btn, function(){ unBook(btn, sno, col) }, "UnBook");

} 

function unBook(btn, sno, col){
  updateStatus(sno, col, "ledig")
  changeButtonBehaviour(btn, function(){ book(btn, sno, col) }, "Book");
} 

function changeButtonBehaviour(btn, click, text){
    btn.onclick = click;
    btn.textContent = text;
}

function updateStatus(sno, col, status){
  var tbody1 = document.getElementById("tbody1");
  let rows = tbody1.children

  if(rows.length >= sno){
      let rowToUpate = rows[sno];
      rowToUpate.children[col].textContent = status;
  }
} 
</script>
<body>
    <h1>sample</h1>
    <table border="1">
        <thead>
            <th>Hytte</th><th>Jul</th><th>Vinter</th><th>Paske</th>
        </thead>
        
        <tbody id="tbody1">
            
        </tbody>
    </table>
    <h5>VinterfeireTider</h5>
    <table>            
            <tbody id="tbody2">
                
            </tbody>
        </table>
    
</body>

did you want me to pass sno through like this? book: <button onclick="book(sno), because then sno is not defined?
@Mr.Ulis I have updated the post with working snippet. Please go through it.

Collectives™ on Stack Overflow

How can i replace multiple specific strings in an array with objects using one function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related