CODEWITHSUNDEEP
javascriptjsonangularjs
Mark
Mark

Reputation: 3197

creating a dynamic form that builds a multi dimensional array

I am a php developer that is new to angular and javascript in general but finding it really powerful and fast for creating interactive UIs

I want to create a form for a user to create an object called a program, a program has some basic info like title and description and it can have many weeks. I want their to be an 'add week' button that when pressed displays a group of form fields related to weeks, if pushed again it shows another group of form fields to fill in the second weeks information.

edit1: specifically, how I am adding the objects to scope.program with the addWeeks method.

secondly when I console.log the $scope.program it just looks very messy a lot of arrays within objects within objects. it just dosnt look like a clean array of data but maybe thats just because I am not used to javascript and or json? Each week is going to have up to 7 days obviously and each day can have numerous events so it just seems to me like it is going to be quite messy but maybe I should just have faith :p

finally how the addProgram method is creating the json object to be sent to the server

when the form is submitted it should post a json object that looks something like this 

program {
    title: 'name of programme',
    desc: 'description of programme',
    weeks: [
            {
                item1: 'foo',
                item2: 'more foo'
            },
            {
                item1: 'foo2',
                item2: 'more foo 2'
            }
           ]
    ]
}

here is a codepen of what I am doing right now but I am not sure it is the best or even an ok way to do it, particularly how I am appending the arrays/objects in teh addWeek method.

there are going to be many more layers to the form and the object it is posting(days, sessions, excersises etc) so I want to get the basics of doing this right before adding all of that.

html

<div ng-app="trainercompare">

 <div ng-controller="programsController">

    <input type="text" placeholder="Program Title" ng-model="program.title"></br>
    <input type="text" placeholder="Program Focus" ng-model="program.focus"></br>
    <input type="text" placeholder="Program Description" ng-model="program.desc"></br>

    <button ng-click="addWeek()"> add week</button>

    <div ng-repeat="week in program.weeks">

        <input type="text" placeholder="Name the week" ng-model="week.name">
        <input type="text" placeholder="Describe It" ng-model="week.desc">
        {{ week.name }}</br>
        {{ week.desc }}</br>

    </div>

    <button ng-click="addProgram()"> add program</button>

 </div>

</div>

app.js

var myModule = angular.module("trainercompare", ['ui.bootstrap']);

function programsController($scope, $http) {


    $scope.program = { 
        weeks: [{

        }]
    };

    $scope.addWeek = function() {
        $scope.program.weeks.push(
            {

            }
        );
    };


    function isDefined(x) {
    var undefined;
    return x !== undefined;
    }

    $scope.addProgram = function() {

        var program = {
            title: $scope.program.title,
            focus: $scope.program.focus,
            desc: $scope.program.desc,
            weeks: []
        };

        angular.forEach($scope.program.weeks, function(week, index){
            var weekinfo = {
                name: week.name,
                desc: week.desc
            };

            program.weeks.push(weekinfo);
        });

        $http.post('/programs', program).success(function(data, status) {
            if(isDefined(data.errors)) {
                console.log(data.errors);
                }
            if(isDefined(data.success)) {
                console.log(data.success);
            }
        });

    }; 


}

Upvotes: 0

Views: 1144

Answers (1)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

Looks to me like you've got a good grasp on it. The addWeek code looks correct. The extra data you see when you console.log your model is some of Angular's internal stuff to track bindings. When you post that to your server it should be cleaned up by Angular.

Angular has a JSON function that removes all of the hash values and other 'angular' things from your JSON. That's why they start with a $ so it knows to remove them.

This happens automatically when you use $http, it's in the documentation here:

If the data property of the request configuration object contains an object, serialize it into JSON format.

Since Angular will clean up the hashes and things, you don't need to "rebuild" the model when you're posting it... just set data to $scope.program and remove 70% of the code in $scope.addProgram.

To learn more specifically how Angular cleans up the JSON, look at this answer: Quick Way to "Un-Angularize" a JS Object

Upvotes: 1

Related Questions