Angular JS : How to create a Array dynamically by reading a JSON Array

Question

I have a JSON as below

[
        {
                "id": 1000,
                "name": "Open"
        },
        {
                "id": 1000,
                "name": "Ravi"
        },
        {
                "id": 1000,
                "name": "POOO"
        }]

    On click of a button I am trying to create a Array by reading all the names from the Array 

    I have tried as follwoing 

        var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope)
{
        $scope.formData = function()
        {
                var aa = $scope.tickets.length;
                $scope.products = $scope.tickets.name;
                alert($scope.products);
        };
        $scope.tickets = [
        {
                "id": 1000,
                "name": "Open"
        },
        {
                "id": 1000,
                "name": "Ravi"
        },
        {
                "id": 1000,
                "name": "POOO"
        }]
});

Currently i am getting undefined , could you please let me know how to do this
Thanks in advance

http://jsfiddle.net/9fR23/434/

I dont want tradional style using a for loop to read .

Could you please suggest a professional approach .

Answer 1

If you won't to use a loop to read, then you can use Underscore.js.

By using Underscore.js you can do this as below. before that you need to check this link for how use underscore inside angular controllers.

var result = _.map([{ id: 1, name: "vinit"},{ id: 2, name: "jaimin"}], function (v) {
    return v.name;
});

alert(JSON.stringify(result));

jsfilddle

Answer 2

You can make a loop to read all data in array and push them to your new array:

$scope.formData = function()
{
    $scope.products = [];
    var aa = $scope.tickets.length;
    angular.forEach($scope.tickets, function(value, key) {
        $scope.products.push(value.name);
    });
    alert($scope.products);
};

Updated fiddle