how to parse and bind complex JSON in backbone.js with view model controller approach

Question

I am using one complex JSON structure as a result of one Ajax call. Here I need "many different kinds of nested models in one parent model".For each person, I am using one EmployeeContext. I need this as my parent model. Within this EmployeeContext, I need many different collection having associated model. Example:I have a collection named expenseContextCollection with "expense" as the model of the same.And I have travellContextCollection with travel as the model. I need to display details of each model and need to update the same and save back to mongo database.

Currently I am using one file for model (EmployeeModel.js),one file for view (EmployeeView.js), one file for template (EmployeePage.html). And in the EmployeeView.js file I am setting the result of ajax call to model.

initialize: function(instance) {
  this.model.set({
    "travelContext": ajaxResponse.EmployeeContext.travellContextCollection
  });
  this.model.set({
    "expenseContext": ajaxResponse.EmployeeContext.expenseContextCollection
  });
  this.render();
}

But I need this travelContext as a backbone collection so that I can loop though it and take each travel model from it

How Can I handle this situation with model view collection approach in backbone.js ?

following is one sample of JSON structure:

{
    "EmployeeContext": {
        "expenseContextCollection": [{
            "currencyType": "INR",
            "empID": "00123456",
            "imageID": "d69ce74a9b4e075d2111cf0619e27c503d",
            "toDate": "11-12-2015",
            "billDate": "11-12-2015"
        }, {
            "currencyType": "INR",
            "empID": "00123456",
            "imageID": "ab2f78d9f9e7897b4a11c5bc82618d09f4",
            "toDate": "25-01-2016",
            "billDate": "20-01-2016",
        }],
        "claimContextCollection": [],
        "travellContextCollection": [{
            "empID": "00123456",
            "isOneWay": true,
            "eligibility": "true",
            "createTravelRequest": {
                "purposeOfTravelDetailsCollection": [{
                    "isPrimary": "true",
                    "purposeOfTravel": "Trans",
                    "leadOpportunity": "BAA12346",
                    "account": "BASS"
                }],
                "travelDetailsCollection": [{
                    "travelToCity": "BANGALORE",
                    "travelType": "DTR",
                    "travelTime": "",
                    "travelFromCity": "CHENNAI",
                    "checkoutDate": "25-01-2016",
                    "travelDate": "20-01-2016",
                    "travelTo": "INDIA",
                    "travelFrom": "INDIA"
                }],
                "Preference": {
                    "empnum": "00123456",
                    "employeeProfilePreference": {
                        "emergencyContacCity": "9412345678",
                        "travelSeatPreference": "aisle",
                        "smsNotification": "true",
                        "emergencyContactNumber": "9412345678",
                        "frequentFlierPreference": {
                            "frequentFlierNo": "EJK7861",
                            "frequentFlierAirlines": "Virgin"
                        },
                        "employeeContactNumber": "8712345678",
                        "emergencyContactPerson": "Moll Mathew",
                        "emergencyContactAddress": "KOOODC",
                        "travelMealPreference": "vegetarian"
                    }
                },
                "otherDetails": {
                    "smsNotification": true,
                    "forexAmount": "0",
                    "forexRequiredDate": "20141002",
                    "employeeContactNumber": "00123456",
                    "billable": "true"
                },
                "emergencyContactDetails": {
                    "emergencyContacCity": "KOOODC",
                    "emergencyContactNumber": "9412345678",
                    "emergencyContactPerson": "Moll Mathew",
                    "emergencyContactAddress": "KOOODC"
                }
            },
            "billSubmissionMode": "manual",
            "travelClass": "Economy",
            "access_token": "",
            "travelEndDate": "25-01-2016",
            "timeStamp": "2015-12-11 16:00:47.395",
            "travelType": "DTR",
            "travelID": "3000553702",
            "travelStartDate": "20-01-2016",
            "approvalGIMS": "approvalGIMS",
            "expenseCodes": {
                "ExpenseTypeCollection": [{
                    "travelType": "DTR",
                    "client": "200",
                    "expenseDescription": "LODGING",
                    "glAccount": "0000834110",
                    "lastChangedBy": "",
                    "expenseCode": "DCN",
                    "changedOn": "0000-00-00",
                    "expenseStatus": "ACTIVE"
                }, {
                    "travelType": "DTR",
                    "client": "200",
                    "expenseDescription": "BUSINESS",
                    "glAccount": "0000839301",
                    "lastChangedBy": "",
                    "expenseCode": "DMT",
                    "changedOn": "0000-00-00",
                    "expenseStatus": "ACTIVE"
                }],
                "ErrorCodeCollection": [{
                    "ErrorText": "S",
                    "ErrorType": "S"
                }]
            },
            "empEmailID": "jaiseephen@gmail.com",
            "entry_type": "new_entry",
            "approvalBFM": "approverBFM",
            "status": "Pending for Expense"
        }],
        "location_contextCollection": [{
            "Status": "success"
        }],
        "user_context": {
            "timeStamp": "2015-12-11 16:00:47.754",
            "access_token": "",
            "empID": "00123456",
            "buDetailsCollection": [{
                "buHeadADID": "",
                "buHeadName": "",
                "buHeadEmail": ""
            }],
            "empTechManager": {
                "techMgrEmpID": "",
                "techMgrADID": "",
                "techMgrName": "",
                "techMgrEmail": ""
            },
            "empPassportDetails": {
                "endDate": "",
                "dateOfBirthAsOfPassport": "0000-00-00",
            },
            "empDetails": {
                "secondSupervisorEmpNumber": "00000000",
                "empDOB": "15.05.1999",
            },
            "empEmailID": "jaiseephen@gmail.com",
            "supDetailsCollection": [{
                "ADID": "FAMM",
                "supADID": "FAMM",
                "supEmail": "fazee_ammed@gmail.com",
                "lastName": "Faz Mammed",
                "supCostCenter": "",
                "Email": "fazee_ammed@gmail.com",
                "CostCenter": "",
                "empNumber": "00678444",
                "supEmpID": "00678444",
                "supName": "Faz Mammed",
                "Name": "Faz Mammed"
            }],
            "altSupDetailsCollection": [{
                "supADID": "FAMM",
                "supEmail": "fazee_ammed@gmail.com",
                "supEmpID": "00678444",
                "supName": "Faz Mammed"
            }]
        }
    }
}

You know exactly what you want. What did you try, and what is the issue you're facing with your attempt..? You shared some code, to which object does it belong to..? what do you expect `instance` to be? what is `ajaxResponse` and how can you access it in initialize..? If possible create a simpler demo with less data. go through [ask] and [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — T J, Dec 16 '15 at 05:42

score 0 · Answer 1 · answered Dec 15 '15 at 14:23

0

I believe the simplest solution would be parse JSON.parse(text). Then, you can use that object in your Backbone model like this:

var obj = JSON.parse(income);
obj.EmployeeContext.travellContextCollection[0]

Also for finding a target value you can create function for searching target node.

answered Dec 15 '15 at 14:23

Alexander Shlenchack

3,779
6
32
46

Hi Alexander, Thank you very much for your quick reply. I am using the same approach that you shared with me. I updated this as part of question itself. and I am getting the data from it using handlebar as follows. {{#travellContextCollection}} {{@index}} {{/travellContextCollection}} I am using this to show empID from all travellContext's and display the same in dropdown. – jaison Dec 15 '15 at 17:43
Now suppose If I have 3 fields in each travellContext and I have two such travellContext in one travellContextCollection, And if I want display the details(3 fields) of travellContext of which empID="myEmployeeID" selected from the already populated dropdown, How I will do this? If I get travellContextCollection as a collection in backbone, and if I can loop through it and get each travellContext based on model, That will be fine right? Is there any such solution? //Below is the explanation using code – jaison Dec 15 '15 at 17:44
`"travellContextCollection": [ {"empID": "00123456", "empName":"name1", "empAddress":"name1Address"}, {"empID": "00222222", "empName":"name2", "empAddress":"name2Address"}] So dropdown will have following data 00123456,00222222(myEmployeeID) And If I select 00222222, I should be able to edit {"empID": "00222222", "empName":"name2", "empAddress":"name2Address"} ` – jaison Dec 15 '15 at 17:49
If I understand you correct I would use events/method in one view or would separate a logic among nested views. – Alexander Shlenchack Dec 15 '15 at 21:26

how to parse and bind complex JSON in backbone.js with view model controller approach

1 Answers1