livi1717 livi1717 - 1 year ago 111
AngularJS Question

Proper data structure in firebase

I'm new to firebase and I'm not sure I am storing data properly.

I am building a form to store data. Right now it only has 2 fields, however I will be adding a few more input fields later.

My form HTML looks like this:

<div class="form-group">
<input placeholder="Event Title..." class="form-control" name="eventTitle" ng-model="newEvent.title">
<div class="form-group">
<input placeholder="random..." class="form-control" name="eventRandom" ng-model="newEvent.random">
<button type="submit" class="btn btn-primary pull-right" ng-click="addEvent(newEvent);newEvent = null;">send</button>

My controller looks like this:

.controller('ChatCtrl', function ($scope, Ref, $firebaseArray, $timeout) {
// synchronize a read-only, synchronized array of events, limit to most recent 10
$ = $firebaseArray(Ref.child('events').limitToLast(10));

// display any errors

// provide a method for adding a event
$scope.addEvent = function(newEvent) {
if( newEvent ) {
console.dir('newEvent: '+ newEvent);
// push a event to the end of the array
// display any errors

In firebase, the data looks like this:

enter image description here

The "newEvent" node seems entirely redundant. I'm not sure how to code my form and controller properly. All the examples I seem to find on the internet use a chat room as an example, and the send form only contains a single textarea field.

I did find an example with more than one field and it showed the above example, however like I pointed out, the "newEvent" node seems redundant after the firebase generated key.

What is the proper way to code a form with multiple input fields?

Answer Source

If you wish to get rid of the newEvent and purely set up the structure as so:

        random: "random",
        title: "event title"

The change how you $add the data:

$$add({ title: newEvent.title, random: newEvent.random })
// display any errors

You are pushing an object with the structure:

    random: "random",
    title: "event title"

which will insert that entire object under the push key.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download