How to use observable property of an observable array to change display property in UI?

Question

this.inviteeEmailList = ko.observableArray([]);

this.status = ko.observable();

var emails = ["hello","test","obseervableArray"];

for(var j in emails)
                {
                    var emailList = {};
                    emailList.email = emails[j];
                    emailList.status = ko.observable(this.status());
                    this.inviteeEmailList.push(emailList);
                }

/**
* after getting response , changing the value of observable to true.
*/
var done = function()
{
  var self = this;
  self.status(true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div id="foundEmail" class="suEmailIdContainer" data-bind="foreach : inviteeEmailList">

            <span data-bind="text:$data.email"></span>
            <div data-bind="text:$data.status"></div>

            <span data-bind="if: $data.status">
                <span>success</span><br/>
            </span>

            <span data-bind="if: !$data.status">
                <span>fail</span><br/>
            </span>
</div>

I have an observableArray with an observable property. As given here:

for(var j in emails)
{
    var emailList = {};
    emailList.email = emails[j];
    emailList.status = ko.observable(this.status());
    this.inviteeEmailList.push(emailList);
}

I am sending request to server and after getting response, I am changing the value of the observable (i.e. this.status()) to true or false accordingly. In html I am trying to access $data.status inside foreach of inviteeEmailList.

But that value is not reflected in the observable property emailList.status.

Anything I am doing wrong?

try something like this jsfiddle.net/LkqTU/24710 and let us know for further clarifications . cheers . — super cool
– super cool, Commented Jun 16, 2015 at 10:15
Thanks. I tried this. Now I want to set status for different emails in the observableArray, for which I am getting the response from server. How I can change the corresponding status of the email? I tried using a counter. which I tried incrementing after getting response, but that is also not working. @super cool — Shrabanee
– Shrabanee, Commented Jun 16, 2015 at 11:21
I have used the counter by giving the counter as index of the observableArray, so that I can get the corresponding status. invitedEmails = 0; this.inviteeEmailList()[invitedEmails].status(true); — Shrabanee
– Shrabanee, Commented Jun 16, 2015 at 11:27
are you getting response at a time ? if so u can simply place the foreach under your ajax success and do the same . — super cool
– super cool, Commented Jun 16, 2015 at 11:28
What if you add additional <span data-bind="text:$root.status"></span>. Each email have their own status (not for each email), and when done, you set root status. If you need that status would be one for all, use computed observables. — VikciaR
– VikciaR, Commented Jun 16, 2015 at 11:28

Shrabanee · Accepted Answer · 2016-04-15 12:58:30Z

1

var emails = [{
    'email': '[email protected]',
    'status': false
}, {
    'email': '[email protected]',
    'status': true
}]

var ViewModel = function () {
    console.log(emails)
    var self = this;

    function inner(email, status) {
        var emailList = this;
        emailList.email = ko.observable(email);
        emailList.status = ko.observable(status);
    }
    self.inviteeEmailList = ko.observableArray();
    self.failStatus = ko.observable('i am failed');
        ko.utils.arrayForEach(emails,function(item){
        self.inviteeEmailList.push(new inner(item.email, item.status));
    });
    console.log(self.inviteeEmailList())
};

ko.applyBindings(new ViewModel());

body {
    font-family: arial;
    font-size: 14px;
}
.liveExample {
    padding: 1em;
    background-color: #EEEEDD;
    border: 1px solid #CCC;
    max-width: 655px;
}
.liveExample input {
    font-family: Arial;
}
.liveExample b {
    font-weight: bold;
}
.liveExample p {
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}
.liveExample select[multiple] {
    width: 100%;
    height: 8em;
}
.liveExample h2 {
    margin-top: 0.4em;
    font-weight: bold;
    font-size: 1.2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div  data-bind="foreach:inviteeEmailList">
                <span data-bind="text:$data.email"></span>
                <span data-bind="text:$data.status"></span> 

                <span data-bind="if: $data.status">
                    <b>Hiee i am True</b>
                </span>

                <span data-bind="if: !$data.status">
                    <span data-bind="text: $root.failStatus "></span><br/>
                </span>
    <br/>
 </div>

Above code can be used to solve the question.

answered Apr 15, 2016 at 12:58

Shrabanee

2,7861 gold badge21 silver badges32 bronze badges

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

2 Comments

Lilith Daemon Over a year ago

Awesome job going back and answering your own question so future users can benefit from it as well! Truly commendable!

Shrabanee Over a year ago

Thanx @Chris Britt

Collectives™ on Stack Overflow

How to use observable property of an observable array to change display property in UI?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related