Exploring elements within a JavaScript array

Question

Exploring elements within a JavaScript array

I'm struggling to retrieve model objects from my view model. It seems like a JavaScript/KnockoutJS familiarity issue, so any guidance is welcomed. Here is the code snippet:

<!-- VIEW -->
<select data-bind="options: allTypes, 
                   optionsCaption: 'Choose...',                   
                   value: chosenType"></select>
<div data-bind="text: chosenType"></div>
<div data-bind="text: chosenValues"></div> <!-- << This line not functioning properly -->
<script type="text/javascript">

/*-- VIEW MODEL --*/
function ViewModel() {
    this.chosenType=ko.observable();
    this.chosenValues=allValues[this.chosenType]; // <-- Issue here?
}

/*-- MODEL --*/
var allTypes=["Animals","Plants","Minerals"];
var allValues={
    "Animals":["Pig","Big pig","Owl"],
    "Plants":["Aloe","Fern"],
    "Minerals":["Bauxite","Chromite"]
};

    ko.applyBindings(new ViewModel());
</script>

The problem may lie in how this.chosenValues is being declared. Appreciate your assistance.

javascript mvvm knockout.js

Answer 1

Answer №1

~~The text binding is designed for handling single values rather than collections or arrays.~~ You can utilize the foreach binding to display each item, as shown below:

<div data-bind="foreach: chosenValues">
    <span data-bind="text: $data"></span>
</div>

Alternatively, you can use a computedObservable similar to the example below:

function ViewModel() {
   this.chosenType=ko.observable();
   // Computed value recalculates if an observable value changes
   // This creates a comma-separated string of values
   // Safety checks can be added as needed
   this.chosenValues=ko.computed(function() {
        var chosenVals=allValues[this.chosenType()];
        return chosenVals.join(', ');
   }, this);
}

It's important to remember that in order to update the UI from a model, an observable must be used. In the provided example, chosenValues needs to be defined as an observable to reflect any changes in selection.

For a working example, refer to https://jsfiddle.net/51oufny4/

Edit ** The sample code from the above fiddle is displayed below:

<!-- VIEW -->
<select data-bind="options: allTypes, 
               optionsCaption: 'Choose...',                   
               value: chosenType"></select>
<div data-bind="text: chosenType"></div>
<div data-bind="text: chosenValues"></div>
<script type="text/javascript">

/*-- VIEW MODEL --*/
function ViewModel() {
    this.chosenType=ko.observable();
    this.chosenValues=ko.computed(function(){
        return allValues[this.chosenType()];
    }, this);
}

/*-- MODEL --*/
var allTypes=["Animals","Plants","Minerals"];
var allValues={
    "Animals":["Pig","Big pig","Owl"],
    "Plants":["Aloe","Fern"],
    "Minerals":["Bauxite","Chromite"]
};

ko.applyBindings(new ViewModel());
</script>

Answer 2

~~The text binding is designed for handling single values rather than collections or arrays.~~ You can utilize the foreach binding to display each item, as shown below:

<div data-bind="foreach: chosenValues">
    <span data-bind="text: $data"></span>
</div>

Alternatively, you can use a computedObservable similar to the example below:

function ViewModel() {
   this.chosenType=ko.observable();
   // Computed value recalculates if an observable value changes
   // This creates a comma-separated string of values
   // Safety checks can be added as needed
   this.chosenValues=ko.computed(function() {
        var chosenVals=allValues[this.chosenType()];
        return chosenVals.join(', ');
   }, this);
}

It's important to remember that in order to update the UI from a model, an observable must be used. In the provided example, chosenValues needs to be defined as an observable to reflect any changes in selection.

For a working example, refer to https://jsfiddle.net/51oufny4/

Edit ** The sample code from the above fiddle is displayed below:

<!-- VIEW -->
<select data-bind="options: allTypes, 
               optionsCaption: 'Choose...',                   
               value: chosenType"></select>
<div data-bind="text: chosenType"></div>
<div data-bind="text: chosenValues"></div>
<script type="text/javascript">

/*-- VIEW MODEL --*/
function ViewModel() {
    this.chosenType=ko.observable();
    this.chosenValues=ko.computed(function(){
        return allValues[this.chosenType()];
    }, this);
}

/*-- MODEL --*/
var allTypes=["Animals","Plants","Minerals"];
var allValues={
    "Animals":["Pig","Big pig","Owl"],
    "Plants":["Aloe","Fern"],
    "Minerals":["Bauxite","Chromite"]
};

ko.applyBindings(new ViewModel());
</script>

Exploring elements within a JavaScript array

Answer №1

Similar questions

Explore in MegaMenu Pop-up

Wait for the canvas to fully load before locating the base64 data in HTML5

Creating a simulation of browser cookies using Javascript

Vuex is exclusively eliminating the initial element

Load the content of the dialog and transfer variables

function instance is causing confusion with the hasOwnProperty() method

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Troubleshooting issue with Bootstrap collapse functionality failing with dynamic IDs

Easy Steps for Mapping Json Data into an Array

Custom transaction settings for Mongoose

How can you exhibit various images without relying on the <img> tag?

Tips for concealing an alert using an 'if' statement

The app constantly requests permission for geolocation services

The Material-UI dialog is experiencing a flickering issue when incorporating Redux to manage the open

The connection between ng-model and ng-repeat, and the comprehension of $scope

What is the best way to input an HTML element into AngularJS code?

Continuously flowing chain of replies from a series of queries using RxJS

How to access Bootstrap's modal initial data-* upon closing

The JavaScript variable assigned from the MySQL query through an Express API is returning as undefined, indicating that the promise is not resolving to

Mastering Puppeteer: Tips for Successfully Submitting Forms