Guide to implementing bidirectional data binding for a particular element within a dynamic array with an automatically determined index

Question

Guide to implementing bidirectional data binding for a particular element within a dynamic array with an automatically determined index

Imagine having a JavaScript dynamic array retrieved from a database:

customers = [{'id':1, 'name':'John'},{'id':2, 'name':'Tim}, ...]

Accompanied by input fields:

<input type='text' name="forJohnOnly" ng-model="customers[0].name" />

<input type='text' name="forTimOnly" ng-model="customers[1].name" />

The initial order of the array always places John as the first element. However, there's concern about potential discrepancies if the sort order is altered in the database without reflecting the change in the UI. Subsequently, when the data is sent back to be saved in the database.

An attempt is being made to address this issue dynamically without resorting to creating an additional array solely for indexing purposes and copying between them.

<input type='text' name="forJohnOnly" ng-model="customers[where customers.id=1].name" />
<input type='text' name="forTimOnly" ng-model="customers[where customers.id=2].name" />  (using id due to possible name changes)

Any suggestions or solutions?

Update:
Although the data resides within an array, the text boxes are not uniformly arranged like a grid.

javascript angularjs

Answer 1

Answer №1

Create a function that takes in an ID and returns the corresponding object. Here's an example:

function fetchItem(id) {
    customers.forEach(item => if(item.id == id){ return item; });
}

You can then use this function in your HTML like so:

<input type='text' name="forJohnOnly" ng-model="fetchItem(customer.id).name" />

Alternatively, you can utilize a ng-repeat directive as shown below:

<div ng-repeat="customer in customers">
    <input type='text' name="{{customer.name}}Only" ng-model="customer.name" />
</div>

Don't forget to sort the customers array in the desired order!

Answer 2

Create a function that takes in an ID and returns the corresponding object. Here's an example:

function fetchItem(id) {
    customers.forEach(item => if(item.id == id){ return item; });
}

You can then use this function in your HTML like so:

<input type='text' name="forJohnOnly" ng-model="fetchItem(customer.id).name" />

Alternatively, you can utilize a ng-repeat directive as shown below:

<div ng-repeat="customer in customers">
    <input type='text' name="{{customer.name}}Only" ng-model="customer.name" />
</div>

Don't forget to sort the customers array in the desired order!

Guide to implementing bidirectional data binding for a particular element within a dynamic array with an automatically determined index

Answer №1

Similar questions

Jquery validation is ineffective when it fails to validate

Dynamically inserting templates into directives

Is there a way to categorize data and sort it by using an action and reducer in redux?

Ajax: The response from xmlhttp.responseText is displaying the entire inner HTML rather than the specified text needed

Switching sub components based on routing through navigation links after logging in

Leverage Express JS to prevent unauthorized requests from the Client Side

Exploring the chosen choice in the Material Design Lite select box

Uploading documents using AngularJS and Express.js

Express router parameter matching

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Creating a hierarchical list structure from a one-dimensional list using parent and child relationships in JavaScript

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Puppeteer App Error: An error has been detected on the client side

Unusual actions exhibited by the es6 object spread functionality

The issue of basic authentication failing to function on Internet Explorer and Chrome, yet operating successfully on Firefox

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

Struggling with Angular UI-Router

Displaying an image with a JavaScript variable is a common task in web

Creating a button that redirects to an external link in CodeIgniter: