Populate my empty arrays with information retrieved from Firebase

I am currently working on creating a "single client" view for my application. Each client has a first name (prenom) and a last name (nom). However, even though my application recognizes that these values exist for each client, they do not appear on the screen.

My main question is: Why are the data values not appearing?

This is the URL I have for the localhost: LOCALHOST/#/clients/-JYvLztvmRIcT8ITKWl1

For an updated version: click to see live code here: http://plnkr.co/edit/0waQY6ny8TvgNZhz4DRW?p=preview

HTML

<p>Client: {{client}}</p>
<p>Clients: {{clients}}</p>
<p>Client.prenom: {{client.prenom}}</p>

Generated HTML (whenever the page gets loaded)

Client: [{},{}]
Clients:
Client.prenom:

Controller (app.js code snippet)

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'accueil.html'
      }).
      when('/clients', {
        templateUrl: 'clients.html',
        controller: 'ClientsCtrl'
      }).
      when('/clients/:clientId', {
        templateUrl: 'client.html',
        controller: 'ClientSoloCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

app.controller('ClientSoloCtrl', ClientSoloCtrl);
function ClientSoloCtrl ($scope, $firebase, $routeParams) {

  var clientId = $routeParams.clientId;
  var ref = new Firebase("https://crmfirebase.firebaseio.com/clients/"+clientId);
  $scope.client = $firebase(ref).$asArray();

  $scope.removeClient = function(client) {
    $scope.client.$remove(client);
  };

  $scope.addClient = function (client) {
    $scope.client.$add(client);
  };

  $scope.updateClient = function (client) {
    $scope.client.$save(client);
  };

}

Answer №1

Upon visiting your Plunkr, the list of clients loads correctly thanks to the ClientsCtrl functionality working as expected.

Once you click on a specific client, the navigation leads to client.html and triggers the execution of ClientSoloCtrl. In this controller, the following code is implemented:

var clientId = $routeParams.clientId;
var ref = new Firebase("https://crmfirebase.firebaseio.com/clients/"+clientId);
$scope.client = $firebase(ref).$asArray();

The error lies in the last line above. Instead of trying to bind a single object to the $scope, it should be an array. To correct this, replace $asArray with $asObject as shown below:

var clientId = $routeParams.clientId;
var ref = new Firebase("https://crmfirebase.firebaseio.com/clients/"+clientId);
var client = $firebase(ref).$asObject();
client.$bindTo($scope, 'client');

By executing the last line mentioned, the synchronized client object becomes accessible in the view under the name client. This variable is utilized in the HTML of your view as follows:

<form class="form-inline" ng-submit="updateClient(client)">
    <div class="form-group">
        <input type="text" class="form-control"  placeholder="Prénom" ng-model="client.prenom" />
    </div>
    <div class="form-group">
      <input class="form-control" type="text" placeholder="Nom de famille" ng-model="client.nom" />
    </div>
    <button type="submit">Sauvegarder</button>
</form>

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

Several middlewares using router.params()

Is it possible to include multiple middlewares as parameters in the function router.params() in Node-Express? I currently have the following setup: const checkAuth = (req, res, next) => {console.log("checking auth"); next()} const checkAuth = ...

Having trouble uploading a file to Laravel using the jQuery .post method?

Here is a snippet of my HTML code: <input type="file" class="form-control" name="file-name" id="file-id"> This is the JavaScript function that is meant to send the file to an API: var file = $('input#file-id').val(); $.post('my/url/ ...

Issue with AngularJS: Component controller fails to load upon routing using ngRoute

As a newcomer to AngularJS, I am struggling with the following code snippet: This is the component defined in the JavaScript file provided: angular.module('EasyDocsUBBApp') .component('loginTag', { templateUrl: 'login ...

Meshes that overlap with transparency features

Could anyone help me with this issue I'm facing? I have a scenario where I am rendering multiple meshes in Three.JS with different solid colors and transparency. However, these meshes are overlapping and the colors are blending together in the overlap ...

Tips for dividing the AJAX response HTML using jQuery

I have a piece of code that is functioning properly. However, I am having trouble splitting the HTML response using AJAX jQuery. I need to split it into #div1 and #div2 by using "|". Could you please provide a complete code example and explanation, as I am ...

The q library ensures that a value is delivered to the done method

I am seeking to understand the purpose and usage of the `done` method in the Q library promises. If `done` is able to receive a value or function through `resolve` or `reject`, could someone clarify how the `done` method is invoked and how arguments can ...

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.cs ...

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

How can you turn consecutive if statements into asynchronous functions in JavaScript?

In my code, I have a loop with a series of if statements structured like this: for( var i = 0; i < results_list.length; i++){ find = await results_list[i]; //result 1 if (find.Process == "one") { await stored_proc(38, find.Num, find ...

Serving sourcemaps for a web extension in Firefox: A step-by-step guide

Currently in the process of developing a web extension using TypeScript, I have encountered an issue with sourcemaps not loading properly. The use of parcel to bundle my extension has made the bundling process simple and straightforward. However, while the ...

Unable to transfer errors from API response to Formik error display

I am currently using React, Formik, and yup to send data to a REST API. This is the structure of my React component: import React from "react"; import { render } from "react-dom"; import { Formik, Field, Form, ErrorMessage } from "formik"; import * as ...

The Map/Reduce function is producing incorrect results because of null values, causing me to receive NaN or erroneous

I am ready to delve into another Map/Reduce query. Within my database, I have a collection named "example" which is structured like this: { "userid" : "somehash", "channel" : "Channel 1" } The Map/Reduce functions I am using are as follows: var map = f ...

Patience is key when waiting for the outcome of an async Javascript function in order to obtain a result (Could it be

Hey there, I've been searching for a solution to my problem even though it's been discussed before. I'm trying to achieve something simple: creating a string like distance is : " + CalculateDistance(position);. The desired result should look ...

Having trouble setting a default value for an angularjs select element while using a watch function

Explore <select ng-options="department.name for department in departmentsList track by department.departmentID" ng-model="editAllocate.department"> </select> <select ng-options="position.name for position in positionsList track ...

When utilizing JSON data in node.js, the .find() method may return undefined

I am currently working on a node server and my goal is to display JSON data when a specific ID is clicked. I have configured a dynamic URL that will retrieve the data of the clicked video using parameters and then compare it with the data in the JSON file ...

What methods are available for setting data to a field using CKEditor in a Protractor test?

Encountered an issue where I received a "element not visible" message in Protractor while attempting to input data into a field with CKEditor. This application is built with AngularJS. element(by.model("question.translations[lang.locale].answer")).sendKey ...

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

Adjusting the focus of an element with jQuery based on coordinates and offset values

jQuery.fn.getCoord = function(){ var elem = $(this); var x = elem.offset().left; var y = elem.offset().top; console.log('x: ' + x + ' y: ' + y); ); return { x, y }; }; This custom jQuery funct ...

Encountered a build issue following the Svelte update: The subpath package './compiler.js' is not recognized by the "exports" definition

Challenge After updating from Svelte version 3.0.0 to the latest using npm i svelte@latest, I encountered an issue where my application would not run and constantly displayed the following error: [!] Error: Package subpath './compiler.js' is n ...

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...