Adding a new item to an array in KnockoutJS causes existing data to vanish

Check out the issue on jsfiddle: http://jsfiddle.net/6bFsY/3/

After clicking "Add Users" and then clicking it again, all data in the extensions drop-down field disappears. This occurred following the addition of an email column. The email field gets pre-filled with whatever is selected in the extension dropdown (email is part of its object).

In addition, the extensions drop-down is unique per line; a section of the script instructs it to remove from the array if it exists on a previous line.

JS

window.usrViewModel = new function () {
    // JavaScript code goes here
};

ko.applyBindings(usrViewModel, document.getElementById('usrForm'));

function Users(fname, lname, email, phone, access, usrExtVal, usrEmail) {
    // Function implementation here
}

var ajaxResultExt = [{
    // Data object entries here 
}];

usrViewModel.extData(ajaxResultExt);

HTML

                    <fieldset title="Users">
                        <legend>2</legend>
                        <div>
                            <!-- HTML structure provided here -->
                        </div>
                    </fieldset>

Answer №1

Your code has encountered a few issues that need to be addressed.

  1. The availableExtData function attempts to access subproperties of usrExtVal, which may sometimes be undefined. This can result in an error that halts the execution of the computed. It is important to first check if usrExtVal is defined before attempting to access its subproperties.

  2. In the ajaxResultExt array, you have two entries with the same extension value. When one entry selects 123, there are no remaining unique extensions for the second entry since both instances of 123 will be removed. Therefore, ensure that each extension value is unique within the array.

  3. Updating usrEmail within a loop inside the availableExtData function is not logical. Consider moving this update to a separate ko.computed function.

To see these fixes implemented, refer to this example: http://jsfiddle.net/mbest/6bFsY/5/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for showcasing all values in a nested array

In my Vue application, I am dealing with a nested array where users can select one date and multiple times which are saved as one object. The challenge I am facing now is how to display the selected date as a header (which works fine) and then list all the ...

D3 group of legendary elements

Is there a way to group both the circle and text elements for each legend item together? I'm currently facing a challenge with the enter/exit methods. While I can create the groups (g), I'm unable to append the text and circle elements. li.sel ...

Exception encountered with HTML5 cache manifest

I attempted to implement the application cache feature on my website, but I am facing a major issue. I only want to cache three specific files: style.css, favicon.ico, and script.js. The problem arises when the browser also caches other files such as inde ...

Creating a JavaScript function using jQuery to calculate the total sum of textboxes with two specified classes

I'm currently attempting to calculate the total of a group of textboxes by utilizing jquery. Each textbox is styled with a class (class1) using bootstrap. To execute the jquery function, I've added an extra class (class2). Below is an example of ...

The ngIf statement in the template isn't functioning properly after a refresh; instead, it is causing a redirection to the homepage

I've been developing with Angular 7, trying to display a <div> ... </div> based on multiple values that I declared as : Boolean = false; in the .ts file. These values are updated in ngOnInit, but for some reason, the page keeps redirecting ...

Switching the displayed image depending on the JSON data received

As a beginner in javascript and jQuery, I am working on displaying JSON results in the browser. My goal is to generate dynamic HTML by incorporating the JSON data. Below is an example of the JSON structure: [{"JobName":"JobDoSomething","JobStatus":2,"JobS ...

What is the best way to display the size of this JSON Object?

Struggling to output the length of this JSON Object on the console, but all I get is 'undefined'. This JSON data is encoded in PHP and then sent back via ajax to an unnamed function as 'msg' {"1":{"item_id":"shirt_straight--small","qu ...

Generating a pdf Blob from an array and displaying it

I am encountering an issue with displaying my PDF file. The data is coming as a byte array, and this is how I currently have it set up: // data is initially String {0: % 1:P 2:D ...} const byteArray = _.map(data); // ["%", "P", "D", "F", "-", "1", ...

Trouble with Gulp and Browserify

Recently, I started diving into the world of gulp and browserify. Here's the setup in my gulpfile.js: gulp.task('default', function (done) { var b = browserify({ entries: ['app/app.js'], }); var browserifie ...

Developing instance members and methods in JavaScript

After encountering a challenge with creating "private" instance variables in JavaScript, I stumbled upon this discussion. Prior to posing my question, I wanted to provide a thorough overview of the problem. My goal is to showcase a complete example of corr ...

Using Javascript to Retrieve Object-Related Information from an Associative Array

I have a list of students' names along with the grades they achieved for the semester. How can I modify my JavaScript code to display the first names of students who earned an "A" grade based on the array provided? This is my current progress, but I k ...

The connection was denied! Has the Selenium server been launched for Nightwatch on Edge?

I have created a project using vue.js. The project includes a small set of unit tests (jest) and an end-to-end test (night watch). Unfortunately, when attempting to run the end-to-end test using npm I encountered the following error: Error retrieving a ne ...

A guide on setting up ExpressJS Error Handling to display custom error messages based on the corresponding HTTP Status codes

I am struggling to figure out how to implement this task. You need to create an error on the /error path and pass it to the next function. Make sure to use appropriate error status codes for displaying different types of error messages. I attempted using ...

transmit JSON formatted form data to an AngularJS platform

I have a webpage built on AngularJS with a login feature. I want to iframe this webpage onto my own page and automatically log in my users. Upon inspecting the AngularJS site, I noticed that the login procedure expects a json object. I have tried multipl ...

Monaco Editor: Module 'monaco-editor' is missing despite being successfully installed

During the development of my desktop application with electron, I encountered an issue with installing Monaco Editor. After using npm install monaco-editor, running the application resulted in a message saying Cannot find module 'monaco-editor'. ...

Utilizing React JS Styled-Components to Import Images from the Public Directory

I've been attempting to set the image as a background-image from the public folder using styled-components. I've tried the following: import styled from "styled-components"; import Background from 'process.env.PUBLIC_URL + /images/ ...

The initiation of jQuery animation through user interaction hinges on the completion of the preceding animation

In my project, I've designed a timeline that offers users the ability to zoom in and out by simply clicking on corresponding buttons. Since the timeline is too large to fit entirely on the screen, it is contained within a scrollable div. To ensure tha ...

Can you demonstrate how to convert a string date array into a JavaScript array?

I am facing a challenge where I need to convert a string representation of an array into a JavaScript array for the purpose of looping. The string in question is enclosed within single quotes. Inside my JavaScript code, I have the following: var length1 ...

If the first element of the array contains all the letters of the second element, then return true

I attempted to tackle this challenge by creating a loop that iterates through the firstword each time a letter matches with a letter in the secondword. function mutation(arr) { var compare = []; var firstword = arr[0].toLowerCase(); var secondword = ...

Centralized Vendor Repository for Managing Multiple Angular2 Applications

Looking to host different Angular2 apps that share the same framework packages and node_modules across a main domain and subdomains: domain.com subdomain.domain.com sub2.domain.com Directory Layout public_html ├── SUBDOMAINS │ ├── sub2 ...