In Angular.js at line 14110, an error has occurred stating that it is unable to access the property 'push' of

Is there a way to create an array on each diary object and push foods that match the diary id to that array? Can anyone suggest improvements or identify reasons why it may not be working?

(Diary Controller)
app.controller("DiaryCtrl", function($scope, $rootScope, $location, DiaryFactory, FoodFactory){

$scope.diaries = [];
$scope.foods = [];


//getMeals
//lists all meals on the diary page
let getAllDiaries = function(){
    DiaryFactory.getDiary($rootScope.user.uid).then(function(FbDiaries) {
        console.log('diaries: ', FbDiaries);
        FoodFactory.getFoodsFB($rootScope.user.uid).then(function(FbFoods){
            console.log('foods from controller', FbFoods);
            FbFoods.forEach(function(food){
                FbDiaries.forEach(function(diary){
                    console.log('foods', food);
                    if(food.mealId === diary.id){
                        diary.foods.push(food);
                        console.log('foods array on diary', diary.foods);
                    }
                });
            });
        });
    });
};
getAllDiaries();

Link to Console error message

Answer №1

Make sure to verify that diary.foods is indeed an array. If you have permission to edit diary, consider using the following:

diary.foods = diary.foods || [];
diary.foods.push(food);

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

Using React Native to extract and store JSON data in a state variable

There are two files located in the same directory: Detail.json Base.js Detail.json contains the following data: [ { "id": 1, "name": "A", }, { "id": 2, "name": "B", }, { "id": 3, "name": "C", } ]; Base.js is structu ...

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

Triggering the MouseLeave event in Chart.js with Angular

I encountered a situation with my Angular component code and need some guidance. Below is the code in question: Angular component html <canvas myChart> [dataset] = "dataVariable" [labels] = "labelVariable" (chartHover) = "chartHover($event ...

The attention is consistently drawn to the link within the OffCanvas element

I had successfully created a script that automatically gives focus to a particular element in a popup div when the down key is pressed in a textbox. However, things took a turn when I introduced a sidebar navigation pane using a Bootstrap offcanvas compone ...

Changing the source value of a video according to the selected option in a dropdown selection

Trying to dynamically update the src attribute of a video tag based on the selected option in a select box. Here's my code: <video src="default.mp4" id="videobox">Your browser does not support the video tag.</video> <select id="test"& ...

Utilizing Ajax to handle and interpret a JSON HttpResponse

After sending an HttpResponse from views.py to an HTML page, I encountered an issue where only the JSON object is displayed instead of the expected details in the HTML format. The current appearance of the page after the request: https://i.sstatic.net/yFe ...

What is the reason for typescript's lack of a "function" type?

As a newcomer to TypeScript, I'm puzzled as to why I am unable to define an object like this: const obj: { property1: string property2: boolean property3: function } It seems that the only workaround is to use: const obj: { property1: strin ...

Ionic 2 ion-select fails to pass value to formbuilder

Currently, I am encountering issues with the ion-select directive in Ionic 2 when using formControlName. All data is being sent to Firebase where it is stored. Here's a snippet of the HTML code: <ion-item fromGroupName="carDetails"> ...

I am looking to show images based on the number chosen from the dropdown menu in CodeIgniter

When a number is selected from the dropdown menu, I want to display images accordingly. The options in the dropdown are 9, 12, and 18. Here is the code snippet for my view page: <form action="<?php echo base_url();?>roxcontrol/numberdisplay" id=" ...

React / Next.js Rendering Problem, Data Discrepancy Between Client and Server

A new feature has been added to a webpage where an image background and a city name are displayed on top of it. The data file that generates these image backgrounds and city data consists of a standard array of objects. The challenge lies in dynamically l ...

Javascript Error - "Trouble identifying property 'querySelector' due to null"

I've encountered an error in my JavaScript code and I can't seem to find the solution. It's possible that there's something wrong with the jquery script I'm using. Error: Uncaught TypeError: Cannot read property 'querySelec ...

Exploring ways to seamlessly incorporate the Google Cloud Speech API into your website

As a beginner with the Google Cloud Platform, I am looking to incorporate the Google Speech API into my webpage using JavaScript. Despite researching documentation, I have been unable to find a solution. If anyone has knowledge on this topic, please help ...

Using Angular Material for creating tabs with identical content

I am using material with angularjs and have encountered an issue with my two md-tabs. Both tabs have a similar DOM structure, but contain some unique content. Instead of duplicating the common DOM twice, I am looking for an alternative solution. Is it poss ...

Using a prefix in ng-class to define a string

ng-class="{{'tabs-'+currentStyle.value}}" ng-class="'tabs-'{{currentStyle.value}}" ng-class="tabs-{{currentStyle.value}}" My goal is to dynamically apply a class based on a value. I have experimented with the options above, but encou ...

Endless Loop Encountered When Attempting to Split a Vuex Array

If you want to check out my codesandbox setup, you can find it here. In this setup, three dates should be printed. The important parts of the code are as follows: import Vue from "vue"; import App from "./App"; import Vuex from "vuex"; Vue.use(Vuex); co ...

What is the most efficient way to submit a form without reloading the page, all while accounting for the PHP script

I have been assigned the task of working on a loan calculator located at loancalc.000webhostapp.com. While browsing through other pages on the same site, I came across a question about submitting a form without reloading the page. However, this informatio ...

Getting unique results from a knex.js INNER JOIN operation

Two tables, metadata and view_events, each have columns for config_id and config_type. The goal is to retrieve all unique view_events based on a user's email address, distinct by config_id and config_type, ordered by timestamp in descending order, lim ...

Using the detach() function followed by append() with the <picture> tag in Safari leads to the unnecessary downloading of a JPG file twice

Max OS version: 10.14.3 Safari version: Version 12.0.3 (14606.4.5) I'm encountering a unique issue specific to Safari. My use of jQuery's detach() and append() on a picture tag is causing Safari to make duplicate image requests, which is unexp ...

How to automatically embed a p5.js canvas into an HTML canvas with the drawImage() method

Whenever I attempt to draw the p5.js canvas into an HTML canvas using drawImage(), I always encounter this error: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type ' ...

Unable to deserialize object. No no-argument constructor defined. If you are utilizing ProGuard, ensure that these constructors are not removed

I am facing an issue with retrieving data from Firestore after updating it successfully. The main problem seems to be: Could not deserialize object. Class com.example.dotdot.Member does not define a no-argument constructor. If you are using ProGuard, mak ...