"Using Angular, implement functionality to add a new item in Firebase with a personalized title instead of an

Currently, I'm working on a back end using Angular with Firebase as the database.

So far, everything is running smoothly and I've successfully created a controller for adding new posts.

The only issue I'm facing is that when a new post is created, Firebase generates a lengthy and random ID for it.

.controller("VideosCtrl", function(firebase, $scope, $firebaseArray) {

 var ref = firebase.database().ref('posts')
 $scope.groups = $firebaseArray(ref);
$scope.addgroup = function() {
$scope.groups.$add({
  title: $scope.newgroupTitle,
  caption: $scope.newgroupCaption,
  creator: $scope.newgroupCreator,
  privacy: $scope.newgroupPrivacy,
  published: $scope.newgroupPublished,

 })

}

I'm currently using scope to create new posts, but I would prefer to have the title used as the identifier instead of a random ID.

      title: $scope.newgroupTitle,

As of now, when I create a new post, my database structure looks like this:

--mydomain
---- posts
------ RANDOM ID GENERATED
--------title
--------caption
--------creator
--------privacy
--------published
------ RANDOM ID GENERATED
--------title
--------caption
--------creator
--------privacy
--------published
----users

Instead, I would like the structure to be:

--mydomain
---- posts
------ TITLE ( same as below)
--------title 
--------caption
--------creator
--------privacy
--------published
------ TITLE (same as below)
--------title
--------caption
--------creator
--------privacy
--------published
----users

If anyone has any recommendations or solutions, I would greatly appreciate it!

Thank you for your assistance!

javascriptangularjsfirebasefirebase-realtime-databaseangularfire

Answer №1

Utilizing $add within Firebase automatically generates a push id for you. If you prefer custom ids, it is recommended to utilize 

object.child(id).set(objectInfo);
instead.

The revised code snippet is shown below:

$scope.addgroup = function() {

  $scope.groups.$ref().child($scope.newgroupTitle).set({
    title: $scope.newgroupTitle,
    caption: $scope.newgroupCaption,
    creator: $scope.newgroupCreator,
    privacy: $scope.newgroupPrivacy,
    published: $scope.newgroupPublished
 });
}

Although this code is written in pure javascript, it should work seamlessly as angularfire is constructed on top of the javascript library.

An important point to consider is that utilizing $firebaseObject is preferred over $firebaseArray when incorporating custom keys to store objects in your Firebase database.

Source: angularfire issue on github.

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

Instructions on how to make a radio button selected when clicked are as follows:

My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...

javascripthtml

Additional container generated through ng-repeat

I am experimenting with angularJS to display data. Here is a snippet of the script I am working with: $scope.incidentCats = [{ name: "FIRE", incidents: [{ location: "location 1", dateTime: "datetime 1", currStatus: "currStatus 1" }, { ...

angularjsangularjs-ng-repeat

Send data between components using Angular directives

I have created a directive for a simple button App.directive('questionbutton', function(){ return { restrict: 'E', templateUrl: 'views/question-button.html' }; }); Another directive I have implemented ...

angularjsangularjs-directive

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

javascriptjqueryhtmlcsstwitter-bootstrap

I keep encountering an issue every time I try to use ng-repeat in my

I am using NG-repeat to display results. The information is retrieved from an array through an API call using $http.post. One of the items in the results is a 'Thumbnail'. A snippet of the result looks like this: "Thumbnail":"http ...

javascriptangularjsangularjs-ng-repeat

AngularJS - utilizing ng-repeat to dynamically generate rows within tables

Using AngularJS Directives with API Calls I attempted to use the unique directive, but it did not work as expected: <table class="table" ng-controller="fetchData"> <tr ng-repeat="elements in rawData.value"> ...

angularjsangularjs-ng-repeat

React Material UI Table - All switches toggled simultaneously

I recently integrated a react mat ui table into my application and included switches in one of the columns. However, I am encountering an issue where all the switches toggle together instead of independently. Any suggestions on how to resolve this? < ...

javascriptreactjsmaterial-ui

When there are two directives on a page, the 2nd angular directive goes blank

I have created 2 different directives: module WU_Tombstones.core.directives { export function publicOffersList(): ng.IDirective { return { restrict: 'E', transclude: true, scope: {}, co ...

angularjsangularjs-directive

Angular $cookieStore failing to hold onto updated cookie when page is refreshed

My current struggle involves $cookieStore's inability to retain a cookie value after it has been updated. Below are two methods from the UserService that handle the cookie: var getCurrentUser = function () { return $cookieStore.get('currentU ...

angularjscookiesangular-cookies

How can I add an element to the DOM in React before the render() method is executed?

Currently, I am working with React in conjunction with Rails and incorporating a charting library known as AnyChart. However, the AnyChart code in my render method automatically searches for a <div id="container"></div> element to connect the c ...

javascriptreactjs

After refreshing the page, the data stored in the localStorage array gets replaced

After refreshing the webpage, my localStorage array values are being overwritten. During a session, I am able to update values on the front end, and the array in localStorage gets updated accordingly. However, if multiple inputs are changed during a sessio ...

javascriptarraysjsonobjectlocal-storage

I built a custom Angular application integrated with Firebase, and I'm looking for a way to allow every user to have their individual table for managing tasks

I am looking to enhance my code so that each user who is logged in has their own tasks table, which they can update and delete. Additionally, I need guidance on how to hide menu items tasks, add-tasks, logout for users who are not logged in, and display th ...

javascriptangulartypescriptfirebaseecmascript-6

Set the new cloned div to be read-only within the dialog box

I have customized a div on a webpage that I want to display as a preview in a dialog box using jQuery's clone function. Now I am trying to make the cloned div readonly once it is displayed in the dialog. Can someone please help me with this? Thank you ...

javascriptjqueryhtmlcss

Changing a JavaScript string into an array

I have extracted an array of objects from a hidden HTML input field and received the following string: "{"id":"1234","name":"john smith","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab0a9b7b3aeb29ab8b6bbb2f4b9b5b7" ...

javascriptarraysliteralsstring-literals

What is the best way to ensure data encapsulation (safeguarding global variables) in an

I'm currently working on an animation loop using three.js, and I've noticed that most online examples (like mrdoob, stemkoski) rely on unprotected globals at the beginning of the script. I attempted to encapsulate these in the init() function and ...

javascriptanimationthree.jsglobal-variablesclosures

Attempting to utilize JavaScript in order to reset a text input field

I'm having trouble clearing a text field using this function. The alert is working but the field remains unchanged. What could be the issue? This function is designed to work on any text field. <!DOCTYPE html> <html> <head> ...

javascriptcss

Error message: Unable to locate module - Issue: Unable to resolve 'file' or 'directory' on Travis

Encountering this issue solely on Travis, however it runs smoothly on my personal machine. Utilizing Karma in combination with Webpack and gulp for testing Angular. Module not found: Error: Unable to resolve 'file' or 'directory' ../HT ...

angularjswebpackphantomjskarma-jasminetravis-ci

Switching rows and columns in uiGrid

I am exploring the potential of ui grid and have been very impressed with its performance so far. In a new use case, I need to rearrange the rows and columns of the grid. My goal is to showcase the headers vertically in the first column and transform the ...

angularjsangularjs-directiveangular-ui-grid

When using Next.js, importing multiple components from the index manifest will automatically import everything

CONTEXT: For a project, I have organized all my UI components in a /components directory. Currently, I export each component in its own file using the following format: export function Component1() { ... } and then import them individually into my page li ...

javascriptreactjsnext.jswebpack

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

javascripthtmlreactjstypescriptwebpack