'Implementing CRUD functions in JavaScript with an object

So I've been trying to implement the CRUD functions into my application (which is a quote generator). Quotes are stored inside of an object:

        const citati = [
      {
        id: 1,
        name: "First, solve the problem. Then, write the code. - John Johnson",
      },
      {
        id: 2,
        name: "Java is to JavaScript what car is to Carpet. - Chris Heilmann",
      },
      {
        id: 3,
        name: "Any fool can write code that a computer can understand. Good programmers write code that humans can understand. - Martin Fowler",
      },
      {
        id: 4,
        name: "Code is like humor. When you have to explain it, it's bad. - Cory House",
      },
      {
        id: 5,
        name: "Optimism is an occupational hazard of programming: feedback is the treatment. - Kent Beck",
      },
      { id: 6, name: "Simplicity is the soul of efficiency. - Austin Freeman" },
      {
        id: 7,
        name: "Before software can be reusable it first has to be usable. - Ralph Johnson",
      },
      { id: 8, name: "It's harder to read code than to write it. — Joel Spolsky" },
      { id: 9, name: "Deleted code is debugged code. - Jeff Sickel" },
    ];

And the HTML code is as follows:


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="main.css" />
        <title>Quote Generator</title>
      </head>
      <body>
        <div class="container">
          <div class="title">- Quote Generator -</div>
          <div class="list">
            <h4>Search your quote:</h2>
            <input
              autofocus
              placeholder="search"
              class="input"
              type="text"
              autocomplete="off"
              name="search"
              id="search"
            />
    
              <ul class="list-group" id="list"></ul>
         
          </div>
          <div id="quote-generator">
            <button id="btn" class="btn randomQuote">Press for a new quote!</button>
            <div id="output" class="txt">Press the button to generate a new quote!</div>
            <button id="btnCreate">Add</button>
            <button id="btnUpdate" class="update">Update</button>
            <button class="check">Check</button>
          </div>
        </div>
        
        
        <script src="main.js"></script>
      </body>
    </html>

I've tried implementing the Create function:

    btnCreate.addEventListener("click", function () {
      citati.push({
        name: prompt("Unesite citat i autora u obliku: citat - autor"),
      });
    });

But I still need to add the id in the function (tips for that are welcome). Now, I think I should be using the id's in the object for other functions but I am kind of lost and don't know how. The main idea is to update/delete the currently displayed quote. How do I get the current quote that is displayed? I tried with findIndex:


    const outputTxt = document.querySelector(".txt").textContent;
    
    function objIndex(citat) {
      return citat.name === outputTxt;
    }
    
    document.querySelector(".check").addEventListener("click", function () {
      console.log(citati.findIndex(objIndex));
    });

But it doesn't work the right way. If anyone could help with this matter I would be very grateful :)

Cheers!

P.S. here is the whole code if anyone needs to see it: https://github.com/msostaric-hub/app1

--SOLUTION--

Update: I figured it out! Here is the code that did the trick:

document.querySelector(".check").addEventListener("click", function () {
  const outputTxt = document.querySelector(".txt").textContent;
  const index = citati.findIndex((x) => x.name === outputTxt);
  citati[index] = {
    name: prompt("Unesite citat i autora u obliku: citat - autor"),
  };
});

javascript crud

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Implementing CRUD functions in JavaScript with an object

Sources

Related Questions