How do I edit or updated an array of Objects CRUD app dynamically?

Question

I am working on a bookmark "collector" app that allows users save websites urls as a collection. I have created an array collectX in the localstorage to save each collections. However I am trying to edit and update each collections that have created on another HTML page.

How can I do that?

Here is what I have tried so far:

//get form values 
// create an object of the form values
//create an empty array
//append object of the form values to the empty array
//display array object values

showCollection();

var getButton = document.getElementById('clickIt');
var collectionTitle = document.getElementById("title");
var collectionDescription = document.getElementById('describe')


getButton.addEventListener('click', function(e){
    e.preventDefault()
    var collections = {
        title: collectionTitle.value,
        description: collectionDescription.value,
        collectedWebsites:[]
    }

    let webCollections = localStorage.getItem('collectx');
    if(webCollections == null){
        var collectionObj = []
        alert('storage is empty')
    }
    else{
        collectionObj = JSON.parse(webCollections);
    }
    collectionObj.push(collections);
    localStorage.setItem("collectx", JSON.stringify(collectionObj));
    showCollection()
});


function showCollection(){
    let webCollections =  localStorage.getItem('collectx')
    if(webCollections == null){
        var collectionObj = []
        alert('storage is empty')
    }
    else{
        collectionObj = JSON.parse(webCollections);
    }
    let html= ''
    var demos = document.getElementById('demo');
    collectionObj.forEach(function(item, index){
        html += `<div class="collects"> 
        Title: ${item.title} <br>
        Description: ${item.description} </div>`
      })
      demos.innerHTML = html
   
    
}

body{
    background-color: #000;
}
.collects{
    width: 150px;
    height: 100px;
    padding: 10px 5px 10px 5px;
    margin-right: 20px;
    border-radius: 10px;
    display: inline-block;
    background-color: #fff;
    
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CollectX</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    
    <form id="forms">
        <input id="title" type="text" placeholder="Collection name">
        <br>
        <br>
         <input id="describe" type="text" placeholder="Description">
        <button id="clickIt"> Submit </button>
      </form>
      
     <div id="demo">

     </div>

    <script src="/script.js"></script>
</body>
</html>

Here is the link to the JSFiddle: https://jsfiddle.net/c3jgezwr/2/

P.S: I have tried to the method used on this page: https://www.xul.fr/javascript/parameters.php

You explained what you want to do, what you did so far (good!) but you didn't explain why that didn't work, if you got stuck, if you got an error, etc... be detailed in your problem. — Evert, Jul 31 '20 at 03:15
I have edited my post. I would like to let users save website Urls in the collectedWebsites Array in the collectX array stored when a user clicks on one of the collections created in the DOM. I have tried to get the collections using the index of the collection that the user clicked on but I couldnt get it to work. — Iamlimo, Jul 31 '20 at 03:26
What did not work? Share what you tried while debugging this. — Evert, Jul 31 '20 at 03:28
I tried what I saw here: https://stackoverflow.com/questions/4656168/javascript-array-to-urlencoded I thought I would be able to render a new HTML page that has a form element, with the index of the collections in the localStorage. — Iamlimo, Jul 31 '20 at 03:30
@Mario here is it: var collectx= [ {"title":"aa","description":"This is all about LOSODE","collectedWebsites":[]}, {"title":"help","description":"I am drwoning","collectedWebsites":[]} ] — Iamlimo, Jul 31 '20 at 03:34
I don't understand, in the form where you save the information in localStorage you don't send any url, — Mario, Jul 31 '20 at 03:38
I understand in `collectedWebsites` array should be urls, but how are these urls be collected because there is no field in the form — Mario, Jul 31 '20 at 03:59
@Mario That is where I am stuck. That is what I was trying to achieve but I kinda got stuck. So I really don't know how to go about collecting the urls in the collectedWebsites array — Iamlimo, Jul 31 '20 at 08:36

score 1 · Answer 1 · answered Jul 31 '20 at 17:03

Please take a look to this example

CSS

body {
  background-color: #000;
}

.collects {
  min-width: 150px;
  min-height: 100px;
  padding: 10px 5px 10px 5px;
  margin-right: 20px;
  border-radius: 10px;
  display: inline-block;
  background-color: #fff;
  overflow: hidden;
}

HTML

<form name="form">
  <div>
    <input name="title" placeholder="Title" />
  </div>
  <div>
    <input name="describe" placeholder="Describe" />
  </div>
  <div>
    <input name="links" placeholder="Add links separated by coma" />
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

JS

const form = document.forms.form;

form.addEventListener("submit", submitHandler);

function getData() {
  return JSON.parse(localStorage.getItem("collectx")) ?? [];
}

function submitHandler(event) {
  event.preventDefault();

  const form = event.target;
  const formData = new FormData(event.target);
  const data = Object.fromEntries(formData);
  const currentData = getData();

  localStorage.setItem("collectx", JSON.stringify([...currentData, data]));

  form.reset();

  render();
}

function render() {
  const collection = getData();
  const entries = collection
    .map(
      ({ title, describe, links }) => `
        <div class="collects">
          <p>Title: ${title}</p>
          <p>Describe: ${describe}</p>
          <p>Links: ${links && links
            .split(",")
            .map((link) => `<a href="${link}">${link}</a>`)
            .join("<br />")}
          </p>
        </div>`
    )
    .join("");

  document.querySelector("#root").innerHTML = `
  <div>
    ${entries}
  </div>
`;
}

render();

https://jsfiddle.net/m3ws94zo/2/

The idea is to add a input to enter links separated by coma. In a real solution, you probably will need to validate the urls

Hi @mario let say I want to fill in the urls in another html page. How do I go about that??? — Iamlimo, Aug 06 '20 at 19:46

How do I edit or updated an array of Objects CRUD app dynamically?

1 Answers1