Encountered an issue with setting the property of "something" to undefined when attempting to generate an array sorted by dates

After seeking help from @Kato on Stack Overflow regarding sorting a Firebase AngularFire array into weeks and days, I encountered an error where I cannot set a property of "something" that is undefined.

To provide more context, I created a detailed Plunker: http://plnkr.co/edit/M4zEjpZ4kqTKn1sHHMt6

//controller
angular.module('app').controller('DemoCtrl', function($scope, DatedList) {
  $scope.world = 'world';

  var listRef = new Firebase("https://talllly.firebaseio.com/");
  $scope.weeks = DatedList(listRef);

  $scope.addTask = function(){
    listRef.push({    
      text: $scope.task.text,
      week: 40,
      day: 2  
    });   
  };


});       

angular.module('app').service('DatedList', function($timeout) {
  return function(pathToList) {
    var list = {};  

    pathToList.on('child_added', function(snap) {
      $timeout(function() { // force Angular to run $digest when changes occur
        var data = snap.val();
        console.log(data);
        var week_number = data.week;
        var week_day = data.day;
        list[week_number][week_day] = data;
      });
    });

    //todo: write similar processing for child_changed and child_removed

    return list;
  }  
});

//html
<form ng-submit="addTask()">
      <input placeholder="add task" ng-model="task.text">
    </form>
    <div ng-repeat="(week, days) in weeks">    
     <h1>{{week}}</h1>
     <div ng-repeat="(day, items) in days">
        <h2>{{day}}</h2>
        <div ng-repeat="item in items">
           {{item|json}}
        </div>
     </div>
    </div>

Answer №1

To start, make sure to set up the list[week_number] variable:

pathToList.on('child_added', function(snap) {
  $timeout(function() { // Trigger Angular to update $digest when changes happen
    var data = snap.val();
    console.log(data);
    var week_number = data.week;
    var week_day = data.day;

    list[week_number] = {};  // Add this line here
    list[week_number][week_day] = data;
  });
});

Answer №2

The error you're encountering occurs because you are attempting to append a property to list[week_num] which is not an object.

An alternative approach could involve:

list[week_number] = list[week_number] || {};
list[week_number][week_day] = data;

Alternatively, you could use:

if(!angular.isObject(list[week_number]) {
    list[week_number] = {};
}
list[week_number][week_day] = data;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulate the ng-model value within a complex array structure

Currently, I am involved in a project where I am adding dynamic form attributes to the parent element. Here is an example of what the data looks like: $scope.uploadedFiles = [{ name: sample.jpg, attr: [{ id: "caption", display: "Titl ...

Can you point me to the location where the 'req' parameter is specified?

I've been exploring a new authentication approach detailed in this article. One issue I'm encountering is locating where the req parameter is declared in the snippet below. It seems like my code won't compile because this parameter isn&apos ...

ng-repeat fails to initiate $destroy on a particular element

After creating a custom directive to use within ng-repeat, I encountered an issue with the remove button. Whenever I click on the remove button to delete a specific element from the list, the $destroy event is triggered on the last element in the list inst ...

Is it possible to implement a single lightbox modal that can display multiple images?

I am looking to create a fullscreen lightbox modal for multiple images, but I have been facing issues with finding the right solution. Most lightbox modals out there rely on jQuery and older versions of Bootstrap. Here is what I have tried so far: HTML: ...

Display issue with ThreeJS cube

Currently, I'm delving into the world of ThreeJS and decided to incorporate the library into my existing NextJS project. My goal was simple - to display a cube on the front page. However, despite my best efforts, nothing seems to be appearing on the s ...

invoke a managed bean to execute JavaScript code

I am facing an issue while trying to clear a hidden form value in a JSF page from a managed bean class. I tried calling a method where I used the following code snippet to call JavaScript, but unfortunately it throws a java.lang.NullPointerException. The c ...

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

Infura makes ten calls to eth_getBlockByNumber for every eth_call request

Currently, I am in the process of creating a straightforward nextjs API route (https://nextjs.org/docs/api-routes/introduction) that is linked to the Ethereum blockchain for executing a view function (which doesn't require any gas) from a smart contra ...

Activating the change event in jQuery: A step-by-step guide

Within my ASP.NET page, I have included a UserControl that contains a RadioButtonList. Whenever an item in the RadioButtonList is changed, I need to trigger the following jQuery function: $('#rdlUser').change(function (e) { alert("change fun ...

The HTTP response object in Express does not provide any data in its return

While working on developing a server using express js, I encountered an issue. When I send a get request to my endpoint from another server, the response is received successfully; however, it does not contain the data that was sent by the server after res. ...

Received an error while attempting an AJAX GET request to a distinct server hosting a WebAPI

This is my first time encountering an issue with an Ajax request in client-side code. I'm hoping that there's a simple mistake in my code that I'm just overlooking. Just to give some background, when I manually access the URL mentioned below ...

Retrieve the JSON value from the remoteMessage received within the onMessageReceived function for Firebase Cloud Messaging push notifications

How can I access the value of image_id within the JSON object payload, which is nested in the JSON object data retrieved from the remoteMessage in the onMessageReceived method? MyFirebaseMessagingService.java public class MyFirebaseMessagingService exten ...

Where can I find the link to access three.js on the internet?

Currently working on a JavaScript application within Google App Engine using three.js, but struggling to find the URL for online inclusion in my document. Uploading the entire large-sized three.js package is not ideal, so I'm looking for a way to obta ...

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Currently, I am working on developing a basic website using Laravel and Vue.js. To ensure that the website is responsive, I integrated Bootstrap 4 into the project. For the most part, everything appears to be functioning correctly - the navbar collapses as ...

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

Guide to Implementing i18n-iso-countries Library in React

I am currently developing a React application and attempting to utilize the i18n-iso-countries package to retrieve a countries object in English where keys represent iso codes and values represent country names. This process is straightforward in Node.js, ...

The issue of AngularJS jQuery combination: scope model not being updated

Can anyone explain why the model is not updating immediately after the destroyElement() function ends in my simple model with jQuery effects attached to elements rendered inside ng-repeat? Check out the code on JSFiddle: http://jsfiddle.net/nEzpS/33/ HTM ...

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

I am attempting to display films within a watchlist module, however it is not allowing me to do so

I have developed a small movie database and need to showcase movies on my watchlist. While I am able to search for movies, adding them to my watchlist is only reflected in the Homescreen component and not in the WatchList component. This is the current s ...

When making jQuery Ajax calls, the $_POST variable may be empty and a warning about headers already being sent may also

I've been working on a PHP project and encountered an issue with sending data from an HTML page using jQuery Ajax to another PHP page. After numerous attempts to debug the problem, I still can't figure out why $_POST is empty when I try to echo. ...