how to make view (form)from json using angular?

Question

I am trying to make view from json .When I have array of objects .I am able to make view and validate that view . If I have this array of object ,in that case I make able to view , check plunker http://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=preview

[{
            type: "email",
            name: "email",
            required:true
        }, {
            type: "text",
            name: "name",
            required:true
        }, {
            type: "number",
            name: "phonenumber",
            required:true
        }, {
            type: "checkbox",
            name: "whant to check"
        },
            {
                type: "url",
                name: "server Url"
            }];

Now the problem occurred when i have json object .I need to show view from json object .I don't know from where I will start work I have this json

"displayName": display the name of label which is from of input text field.
inputValues :represent the type of tmput filled .if it is number then user fill only number , text then user only fill number ,email then user fill email , if it switch then it is drop down with given option.
"required" give if field is required or not ?

Are you able to make changes to that Json? Or is it something you do not control? — Fedaykin
– Fedaykin, Commented Aug 9, 2014 at 18:38
No I don't want to change json ..can we use these plugins.github.com/danhunsaker/angular-dynamic-forms — Shruti
– Shruti, Commented Aug 9, 2014 at 21:02
@Fedaykin json is fix .using that json I need to make own json object which then used to make view — Shruti
– Shruti, Commented Aug 9, 2014 at 21:43

Caspar Harmer · Accepted Answer · 2014-08-10 03:56:29Z

1

Assuming your JSON is coming from a configuration file or a service, you can start by obtaining the JSON as a JSON object:

angular.module('myapp', [])
  .controller('MyController', ['$scope', function($scope) {

    $scope.outputs = {};
    $scope.rawInput = JSON.parse( '{"studentName": "abc", \
        "input": {\
            "loginUser": {\
                "displayDetail": "UserId for login.",\
                "displayName": "Login User Id*",\
                "inputType": "TEXT",\

(I had to escape returns to allow the pretty printed JSON string to be parsed)

Once you have that, you are nearly there. Now you can just go the level of JSON that you require and construct your inputs array:

$scope.formInputs = $scope.rawInput['input'];
$scope.inputs = [];

angular.forEach($scope.formInputs, function(value, key) {
/* do something for all key: value pairs */
  $scope.inputs.push({"type":value.inputType.toLowerCase(),"name":value.name,"required": value.required})
});

Note you should probably do some error checking here - for the purposes of this example, I don't use any. Here is a working plnkr that demonstrates this code.

I haven't got it all to work - you'll have to construct your select or radio button inputs, but I think you should be able to take it from here.

EDIT I have undated the plnkr to make it public

edited Aug 10, 2014 at 3:56

answered Aug 10, 2014 at 2:59

Caspar Harmer

8,1372 gold badges46 silver badges41 bronze badges

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

5 Comments

Shruti Over a year ago

plunker is not working please check ..link is not open

Shruti Over a year ago

thanks looking for same ..great answer .I need to ask 2 Question how we can make drop drown in that "addFullDataInReport" we have drop drop with option "true" and "False"

Shruti Over a year ago

second Question ? it is good to used this plugin github.com/danhunsaker/angular-dynamic-forms.because further I need to validate my forms.I have around 40 json file so I need to create 40 form so can I use your solution or this plugin with validation

Shruti Over a year ago

please check this plunker plnkr.co/edit/UF6vPoeUFn3FndFKQ1y0?p=preview .I used the plugin but it will not display..

Caspar Harmer Over a year ago

Hmm not sure about validation. I can't see it in the github project. Unfortunately I don't have any more time to look at this issue, sorry. I'd say that you can use the javascript creation method in my example. But I'm not sure, sorry.

Collectives™ on Stack Overflow

how to make view (form)from json using angular?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related