Add and Remove nested items to array in AngularJS

Question

I want to to create a Form Builder in AngualrJS with Ability to add and remove unlimited Child-Questions to choices of Parent Questions like this:

Question 1
  ---Choice1.1
  ---Choice1.2
     ---Child-Question 1.1
       ---Choice1
       ---Choice2
          ---Child-Question 1.1.2
            ---Choice1
            ---Choice2
       ---Choice3
  ---Choice1.3
Question 2
  ---Choice2.1
  ---Choice2.2
  ---Choice2.3

This is sample JSON that I want to dynamically create:

{
title: "string",
description: "string",
questionType: 0,
option: {
    min: 0,
    max: 0,
    step: 0,
    unit: "string"
},
choices: [
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {}
    },
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {
            title: "string",
            description: "string",
            questionType: 0,
            option: {},
            choices: [
                {
                    title: "string",
                    order: 0,
                    matrixPosition: 0,
                    childQuestionTemplate: {}
                }
            ]
        }
    },
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {
            id: 0,
            title: "string",
            description: "string",
            questionType: 0,
            option: {
                min: 0,
                max: 0,
                step: 0,
                unit: "string"
            },
            choices: [
                {
                    title: "string",
                    order: 0,
                    matrixPosition: 0,
                    childQuestionTemplate: {
                        title: "string",
                        description: "string",
                        questionType: 0,
                        option: {},
                        choices: [
                            {
                                title: "string",
                                order: 0,
                                matrixPosition: 0,
                                childQuestionTemplate: {}
                            }
                        ]
                    }
                }
            ]
        }
    },
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {}
    }
]
}

Now I want to know how I can select (get path of) a Choice from my HTML to Push a child question into that choice of other child question?

Answer 1

If you want to get the path of a choice from the html, you can do this by providing an index(unique ID) for your questions and I suggest you change "choices" from array to an object so you can directly access it using the specified unique ID.

example would be:

var jsonObject = {
    "1-1" : {
        title: "primary index",
        description: "string",
        questionType: 0,
        option: {
            min: 0,
            max: 0,
            step: 0,
            unit: "string"
        },
        choices: {
            "2-1" : {
                title: "secondary index",
                order: 0,
                matrixPosition: 0,
                childQuestionTemplate: {}
            },
            "2-2" : {
                title: "string",
                order: 0,
                matrixPosition: 0,
                childQuestionTemplate: {
                    title: "string",
                    description: "string",
                    questionType: 0,
                    option: {},
                    choices: {
                       "3-1" : {
                            title: "tertiary index 1",
                            order: 0,
                            matrixPosition: 0,
                            childQuestionTemplate: {}
                        },
                        "3-2" : {
                            title: "tertiary index 2",
                            order: 0,
                            matrixPosition: 0,
                            childQuestionTemplate: {}
                        }
                    }
                }
            }
        }
    }
}

So if you want to remove a choice, you can do this

var primaryIndex = "1-1";

//remove on the tertiary index
var secondaryIndex = "2-2";
var tertiaryIndexToDelete = "3-1";
delete jsonObject[primaryIndex].choices[secondaryIndex].childQuestionTemplate.choices[tertiaryIndexToDelete]; 

//remove on the secondary index
var secondaryIndexToDelete = "2-2";
delete jsonObject[primaryIndex].choices[secondaryIndexToDelete]; 

Now if you want to add a choice to a question, you can do this

var newChoice = {
    title: "new choice",
    order: 0,
    matrixPosition: 0,
    childQuestionTemplate: {}
}
var indexOfNewChoice = "2-3";
jsonObject["1-1"].choices[indexOfNewChoice] = newChoice;

I hope this helps.