How to change value of an array in knockout.js?

Question

<div class="row">
    <div class="col-md-6" data-bind="visible: application.candidateMostRecentAcademic" style="display:none;">
        <span>Education:</span>
             <!-- ko if: application.candidateMostRecentAcademic != null -->
               <!-- ko with: application.candidateMostRecentAcademic[0] -->
                 <span data-bind="text: $data.degreeTypeName"></span>
                 <span data-bind="text: $data.institutionName"></span>
                 <span data-bind="text: $data.dateToYear"></span>
               <!-- /ko -->
             <!-- /ko -->
    </div>
</div>

I was going to make the the column visible only if application.candidateMostRecentAcademic (array) exists.

But I also wanted to add a condition for an array that has 0 length (which is not null).

So when I tried to do,

<div class="col-md-6" data-bind="visible: application.candidateMostRecentAcademic.length != 0" style="display:none;">

it gave me an error saying that it cannot access the "length" of a null object. So, what I am trying to do is, I want to set an array of length 0 to null so that it can just be invisible just like the null object.

How can I do this with knockout data-binding?

Can you initialize the array in your ViewModel as application.candidateMostRecentAcademic = [] so that it'll never be null but by default, the length will be 0, which will not throw the error as you described. — Yatin
– Yatin, Commented Jun 7, 2017 at 21:48

penguinflip · Accepted Answer · 2017-06-07 21:55:11Z

1

If I understand you correctly, you want your if statement to pass if the Array is not null and if it's length is not equal to 0?

If this is the case, you could do this in your template:

<div class="col-md-6" data-bind="visible: application.candidateMostRecentAcademic && application.candidateMostRecentAcademic.length !== 0">

answered Jun 7, 2017 at 21:55

penguinflip

1,5052 gold badges13 silver badges22 bronze badges

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

Comments

Yogendra Paudyal · Accepted Answer · 2017-06-07 21:33:50Z

0

Add another member in viewmodel called isColumnVisible and use this member to show and hide column.

var viewModel={
    isColumnVisible=true;
    loadData:function(){
        // code to load data;
        // application= something
        if(application.candidateMostRecentAcademic ===null){
            this.isColumnVisible=false;
        }
    }
}

answered Jun 7, 2017 at 21:33

Yogendra Paudyal

1,3871 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to change value of an array in knockout.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related