CODEWITHSUNDEEP
javascriptjquery
soccerway
soccerway

Reputation: 11951

How to get div data from html displayed after appending from localStorage?

How to get data from the var projectdata = localStorage.getItem('createProject') from row highlighted . I have console log the projectdata as below with multiple records:

.cleaner{float:left; padding:20px 10px 10px 20px;} 
.rows{width: 1000px; min-height: 80px;}
.rowsAlt{
background-color: #edece8;
}

.cols{height: 100%; float:left;}
.col1{width: 100px; float:left; padding:20px 10px 10px 20px;}
.col2{width: 100px; float:left; padding:20px 10px 10px 20px;}
.col3{width: 200px; float:left; padding:20px 10px 10px 20px;}
.col4{width: 150px; float:left; padding:20px 10px 10px 20px;}
.col5{width: 150px; float:left; padding:20px 10px 10px 20px;}
.col6{width: 100px; float:left; padding:20px 10px 10px 20px;}

#row2{
margin-left:20px; 
margin-top: 50px;
position: relative;
width: 90%;
margin: 20px 0px 0px 20px;
}

.highlight { background: #ebdb34 !important; }
.projecteditLink{
height:10px;
border-radius: 5px;
background-color: #42f56f;
color:#fff;
}
<div class="row"><div id="row2" class="rows rowsAlt"><div id="projectName_1" class="col1">Sun</div><div id="clientName_1" class="col2">sun</div><div class="col3">lion,wolves</div><div id="projectStartDate_1" class="col4">Nov-2019</div><div class="col5">Mr Rambo</div><div class="cleaner">Added Sun here</div><div class="col6"><a class="projecteditLink" href="">Edit Link</a></div></div></div><div class="row"><div id="row2" class="rows rowsAlt"><div id="projectName_2" class="col1">Moon Project</div><div id="clientName_2" class="col2">earth</div><div class="col3">lion,wolves</div><div id="projectStartDate_2" class="col4">Nov-2019</div><div class="col5">Mr Simmer</div><div class="cleaner">Added Sun here</div><div class="col6"><a class="projecteditLink" href="">Edit Link</a></div></div></div><div class="row"><div id="row2" class="rows rowsAlt"><div id="projectName_3" class="col1">Simple Demo</div><div id="clientName_3" class="col2">earth</div><div class="col3">man,lion</div><div id="projectStartDate_3" class="col4">Nov-2019</div><div class="col5">Mr Test</div><div class="cleaner">Added Simple here</div><div class="col6"><a class="projecteditLink" href="">Edit Link</a></div></div></div>

// Would like to get text like Project One, SAAS, man, from the variable projectdata. How to achieve that ? 

   var divCount = 1;
  $(document).ready(function(){
    document.getElementById('dashboardArea').innerHTML = "";
    var data = localStorage.getItem('saveToLocal');
    $('#dashboardArea').append(data);   
  $("body").on('click', '#saveProjecttoDash', function(e) {
    var projectdata = localStorage.getItem('createProject');
    console.log("Same here:"+projectdata);
    // How to get data from  `projectdata` html ?
    $('#overlay').fadeOut(300);
    var someDiv = '<div class="row"><div id="droppable'+divCount+'" class="pull-bottom" style="height:500px;background:#e3e8e7"><h3></h3><span class="clientNameDash"></span><img src="sampleImg.PNG" id="dashboardImage-"><img id="deleteDashboard" src="delete-512.png"></div></div>';
    $('#dashboardArea').append(someDiv);
    divCount++;
    var saveToLocalStorage = document.getElementById('dashboardArea').innerHTML;
    localStorage.setItem("saveToLocal",saveToLocalStorage);
  });

});

Upvotes: 0

Views: 68

Answers (1)

Abito Prakash
Abito Prakash

Reputation: 4770

You can use this function to convert your string into an HTML object ( wrapped aroung a div )

function createElementFromHTML (htmlString) {
  var div = document.createElement("div");
  div.innerHTML = htmlString.trim();
  return div;
}

And then pick out required values with getElementsByClassName

const projectdata = localStorage.getItem('createProject');
const projectDataHTML = createElementFromHTML(projectdata);

const getInnerText= element => element.innerText;
const projectNames = [...projectDataHTML.getElementsByClassName('col1')].map(getInnerText); 
const clientNames = [...projectDataHTML.getElementsByClassName('col2')].map(getInnerText);

Result

projectNames ["Sun", "Moon Project", "Simple Demo"]
clientNames ["sun", "earth", "earth"]

Similarly you can pick out other values as well using their classNames (col3, col4...)

To get highlighted row record

const [highlightedRow] = projectDataHTML.getElementsByClassName('highlight');
const highlightedProjectName = highlightedRow.getElementsByClassName("col1")[0].innerText;
const highlightedClientName = highlightedRow.getElementsByClassName("col2")[0].innerText;

Upvotes: 1

Related Questions