Nested Collection with KnockoutJs and Asp.net MVC

Question

I have this .net class below

public class JobDetailsDTO
{
    public string JobName { get; set; }
    public string CompanyName { get; set; }
    public String[] IndustryName;
}

i am trying to map this to a Knockout JS model, my nested collection is not working looks like, what am i doing wrong in the JS model?

var jobViewModel = {
    jobDetailsDTO: ko.observableArray(),
    currentPage: ko.observable(-1),
    industries: ko.observableArray(industries),
    contentLoadTriggered: false
};

Here is my data bind

<div id="jobcontent-wrapper" data-bind="foreach: jobDetailsDTO">
    <label data-bind="text: JobName"></label>
    <span class="jobsize" data-bind="text: CompanyName"> </span>
    <div class="col-md-12" data-bind="foreach: industries">
        <span class="glyphicon glyphicon-heart"></span>
        Industry
        <span class="jobsize" data-bind="text: IndustryName"></span>
    </div>
</div>
<div id="jobcontent-wrapper" data-bind="foreach: jobDetailsDTO">
    <label data-bind="text: JobName"></label>
    <span class="jobsize" data-bind="text: CompanyName"> </span>
    <div class="col-md-12" data-bind="foreach: industries">
        <span class="glyphicon glyphicon-heart"></span>
        Industry
        <span class="jobsize" data-bind="text: IndustryName"></span>
    </div>
</div>

Here is my ajax to get data

function getData(pageNumber) {
    if (jobViewModel.currentPage() != pageNumber) {
        $.ajax({
        url: "/api/jobservice/getjob",
        type: "get",
        contentType: "application/json",
        data: { id: pageNumber }
        }).done(function (data) {
            if (data.length > 0) {
                for (i = 0; i < data.length; i++) {
                    jobViewModel.jobDetailsDTO.push(data[i]);
                }
            }
        });
    }
}

This is the JSOn that i get from my controller

[{"IndustryName":["RIE","XSL","FWTI","QPCAP","PPGPUU"],"JobName":"KLLFBN","CompanyName":"CKI"},{"IndustryName":["SAF","JIF","MVFG","RPAIP","ALAUKM"],"JobName":"ROULJS","CompanyName":"LXN"},{"IndustryName":["IIH","PEM","TINE","EOAXF","ZYJHKK"],"JobName":"ISUYFV","CompanyName":"VZR"}]

When i disable this line in my view model it works to pull the data, but when i enable this line it does not execute any JS after that point. my assumption is there is something wrong with how i have defined the child collection. i do not see any err msg on console on Firefox firebug

var jobViewModel = {
    jobDetailsDTO: ko.observableArray(),
    currentPage: ko.observable(-1),
    industries: ko.observableArray(industries), ///this line
    contentLoadTriggered: false
};

Answer 1

I don't see any mention of the industries variable in your code, before the initialization of the jobViewModel object. Could the problem be that you don't have any object set to the industries variable?

I think what you should do is that you should remove the line in the jobViewModel initialization which you are referring to. Then, since your returned JSON has a property called IndustryName which is an array of string (and no property called industries ), I think you should also rewrite your html binding to something similar to the following (the changes from your original binding is on lines 4 and 7):

1. <div id="jobcontent-wrapper" data-bind="foreach: jobDetailsDTO">
2.     <label data-bind="text: JobName"></label>
3.     <span class="jobsize" data-bind="text: CompanyName"> </span>
4.     <div class="col-md-12" data-bind="foreach: IndustryName">
5.         <span class="glyphicon glyphicon-heart"></span>
6.         Industry
7.         <span class="jobsize" data-bind="text: $data"></span>
8.     </div>
9. </div>