When storing data in the local storage, ensure that duplicates are not being unintention

Question

When storing data in the local storage, ensure that duplicates are not being unintention

I'm currently developing a daily task organizer for work. The data is being pulled from local storage successfully. I am facing an issue while iterating through an array of objects and trying to retrieve data based on matching IDs. These objects have two properties - hour and description, with the hour acting as the unique identifier. However, when retrieving the data from localStorage, the targeted object's data is duplicated in every textarea.

Is there a way to display the data only in the corresponding textarea with the matching ID?

The problematic section of my code seems to be:

for (var i = 0; i < timeBlockArr.length; i++) {

  var timeBlockId = $(".time-block").attr("id");
  if(timeBlockArr[i].hour === timeBlockId) {    
    $(".time-block .description").val(timeBlockArr[i].description);
  }
}

You can view the working project on jsFiddle here: https://jsfiddle.net/j9hepL2b/

javascript arrays object local-storage

Answer 1

Answer №1

While looping through your localStorage objects, the value of timeBlockId remains constant regardless of the element currently being processed.

The line $(".time-block") represents an array of elements with the class time-block.

var timeBlockId = $(".time-block").attr("id");

However, using jQuery's .attr() method will only retrieve the ID of the first element in that array as stated in the documentation:

The .attr() method retrieves the attribute value for only the initial element within the matched set.

Thus, the output of console.log(timeBlockId) will always be "hour-9".

If I interpret your intention correctly, the if statement may not be necessary at all. Consider this alternative approach:

for ( var i = 0; i < timeBlockArr.length; i++) {

    const selector = '#' + timeBlockArr[i].hour + ' .description';

    $(selector).val(timeBlockArr[i].description);
  
}

This code selects the element with the class .description (i.e., the textarea) which is a descendant of the element with the ID #hour-9, #hour-10, and so on, and updates the textarea's value using .val().

Answer 2

While looping through your localStorage objects, the value of timeBlockId remains constant regardless of the element currently being processed.

The line $(".time-block") represents an array of elements with the class time-block.

var timeBlockId = $(".time-block").attr("id");

However, using jQuery's .attr() method will only retrieve the ID of the first element in that array as stated in the documentation:

The .attr() method retrieves the attribute value for only the initial element within the matched set.

Thus, the output of console.log(timeBlockId) will always be "hour-9".

If I interpret your intention correctly, the if statement may not be necessary at all. Consider this alternative approach:

for ( var i = 0; i < timeBlockArr.length; i++) {

    const selector = '#' + timeBlockArr[i].hour + ' .description';

    $(selector).val(timeBlockArr[i].description);
  
}

This code selects the element with the class .description (i.e., the textarea) which is a descendant of the element with the ID #hour-9, #hour-10, and so on, and updates the textarea's value using .val().

When storing data in the local storage, ensure that duplicates are not being unintention

Answer №1

Similar questions

Angular and React: A Comparison of Their Binding Mechanisms

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

Storing multiple files in a single database field using C# byte arrays

Failure to populate AngularJS view

Leveraging Attr Jquery

Invoking Redux actions within a React component

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

Angular and AngularJS directives work together to indicate events on a line chart

Encountering weathers.map is not a function error while using React.js with OpenWeatherMap integration

Acquire unique keys from a JSON array without duplication

I am in desperate need of assistance to grasp the concept of writing a class (including the declaration and definition) solely by analyzing a main program and the corresponding sample output

Trying to connect to a socket.io server from a remotely hosted page returns an error stating "require undefined."

Is it possible to include three sorting states in jQuery DataTables: ASC, DESC, and NO_SORT?

What are the steps to configure an AngularJS application with onDeviceReady and initialization functions for Cordova integration?

Is it possible to programmatically include a getter method to a class in JavaScript or TypeScript?

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Automatic Addition of Row Numbers Enabled

The use of a nested loop in jQuery to render elements using the appendPe function only displays

Sorting a select element using Javascript/JQuery while taking into consideration the label attribute present in the options

Using RequireJS with ASP.NET MVC for Efficient Script Bundling