Create JSON object from multiple row input fields using Angular JS

Question

The multiple row input fields are

enter image description here

Using jQuery I created a method to derive JSON

function createReminderJSON() {
         jsonObj = [];
        $("input[class=occasion]").each(function() {

            var occasion = $(this).val();

            if ('' !== occasion) {
                var fname = $('.fname').val();
                var lname = $('.lname').val();

                item = {}
                item["occasion"] = occasion;
                item["firstName"] = fname;
                item["lastName"] = lname;

                jsonObj.push(item);
            }

        });
        console.log(jsonObj);
        $.ajax({
            type : "post",
            contentType : "application/json",
            url : "/add/reminder",
            data : JSON.stringify(jsonObj)
        }); 
    }

JSON created is

[{occasion:1,firstName:Tim,lastName:Cook},{occasion:1,firstName:Steve,lastName:Jobs}]

HTML of input fields:

<tr>
    <td><input type="text" name="occasion" placeholder="occasion" class="occasion" ng-model="rem.occasion"/></td>
    <td><input type="text" name="firstName" placeholder="fname" class="fname" ng-model="rem.firstName"/><td>
    <td><input type="text" name="lastName" placeholder="lname" class="lname" ng-model="rem.lastName"/><td>
</tr>

Angular JS method invoked on ng-click=addReminder() is

function Reminder($scope,$http){
        $scope.addReminder = function() {
            var reminders = $scope.rem;
            alert(reminders);
            $http.post('/add/reminder', reminders).success(function(data) {
                alert("Success!");
            });
        }
    }

Is angular.forEach necessary? How can I create JSON using Angular JS silmilar to the jQuery one. The alert is giving me undefined when I tried with a single row input.

Can you post a jsfiddle of the question? jsfiddle.net

Huy Hoang Pham
– Huy Hoang Pham

2015-02-11 08:00:03 +00:00
Commented Feb 11, 2015 at 8:00 — Huy Hoang Pham
– Huy Hoang Pham, Commented Feb 11, 2015 at 8:00

dev_khan · Accepted Answer · 2015-02-11 11:13:57Z

1

You just need to declare an empty object in the controller.

$scope.rem = {};

answered Feb 11, 2015 at 11:13

dev_khan

7177 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jochen van Wylick · Accepted Answer · 2015-02-11 08:24:47Z

0

No, it's not. Remember that JSON stands for Javascript Object Notation. It is the way an object is being described. So the models in your AngularJS controller - as soon as they are serialized 'over the wire' by a POST for example, look like the JSON you want.

Here's a Fiddle that demonstrates: http://jsfiddle.net/358uqccy/3/. The | json filter converts an object into JSON to show you that the JSON of your model is available at all times.

edited Feb 11, 2015 at 8:24

answered Feb 11, 2015 at 8:12

Jochen van Wylick

5,4015 gold badges46 silver badges66 bronze badges

3 Comments

Pranav Over a year ago

Hi Spike, I can see the JSON using console.log() and the filter you specified also works fine. The problem is that '$scope.rem' doesn't have the JSON required.

Jochen van Wylick Over a year ago

What does it have? Are you talking about the quotes around the names?

Jochen van Wylick Over a year ago

@Kni8 - I would set things up a bit differntly than you have. Here's how I would do it: jsfiddle.net/358uqccy/5 . I hope it's close enough to what you had so it can actually help you.

Collectives™ on Stack Overflow

Create JSON object from multiple row input fields using Angular JS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related