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.

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!

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

Performing a JSON POST Request: Steps for sending a POST request with JSON data format

I need to send the following data: { "contactsync": { "rev":4, "contacts":[ { "fields": [ { "value": { ...

Guide to summing the values in an input box with TypeScript

https://i.stack.imgur.com/ezzVQ.png I am trying to calculate the total value of apple, orange, and mango and display it. Below is the code I have attempted: <div class="row col-12 " ngModelGroup="cntMap"> <div class="form-group col-6"> ...

Avoiding metacharacters and utilizing them as a string variable for selection

For example, I have a variable called myid, and its value is "abc xyz". Then, I use a function to escape metacharacters and assign the result to another variable like this: var x = "#"+escapechars(myid);. The evaluated value of x is #abc\\xyz. ...

What steps can be taken to enable users to draw a path on a Google Map?

I'm working on a new project for a Facebook app that will allow users to map out their marathon route using Google Maps. I plan to utilize mySQL database records to store fixed points along the path (such as specific locations based on latitude and lo ...

JavaScript code to access values from a JSON object

{ "4": { "structure": "Archaeological Museum", "boxes": [{ "id": "5", "name": "Ground Cassa DEMO" }] }, "5": { "structure": ...

Issue encountered while invoking the jQuery html method

Embarking on my first adventure with javascript + jQuery, creating a basic page but running into errors. I've gone through the code multiple times and still can't seem to find the issue. Below is the error message I am encountering: The complet ...

javascript - The Key Pair of a Jquery Object is Not Defined

I'm currently going through an HTML element, which is an input field using jQuery, but I keep encountering an error. Here's the code snippet: $(".submit_button").on("click touch", function(e){ e.preventDefault(); var formdat ...

A guide on showcasing nested arrays data in an Angular application

info = [ { list: [ { title: 'apple'} ] }, { list: [ { title: 'banana'} ] } ] My goal here is to extract the list items. Here is how they are structured. desired r ...

Exploring the Possibilities: Incorporating xlsx Files in Angular 5

Is there a way to read just the first three records from an xlsx file without causing the browser to crash? I need assistance with finding a solution that allows me to achieve this without storing all the data in memory during the parsing process. P.S: I ...

Parsing JSON data from Tiled map editor and rendering it onto a canvas

I am currently following a tutorial on how to load JSON map files created by the Tiled Map Editor in my JavaScript/Canvas game. So far, I have implemented my own version without any errors showing up in Firebug or the console. Upon closer inspection with ...

Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active. Is there a way to achi ...

Next.js encounters an error when importing web3

Currently, I am utilizing next js and material ui to create a demo dapp for educational purposes. With metamask installed, I have successfully implemented a "connect to wallet" button. My issue arises when attempting to import the Web3 constructor. This i ...

How can I incorporate a material-ui component using innerHTML?

Hi there, I'm new to using React and StackOverflow. I've been attempting to incorporate a Button component from material-ui by utilizing document.getElementById.innerHTML. However, upon the appearance of the button, the material-ui styling fails ...

Instructions for creating a slush machine

Today, I tried to create a slush generator but ran into some issues. Even after following tutorials online and double-checking my work, the generator doesn't seem to be functioning properly. If anyone can identify what I might have done wrong, please ...

Utilize a standard JavaScript function from a separate document within a function of a React component

I am facing an issue where I need to incorporate a standard JavaScript function within a React component function. The script tags are arranged in the footer in the following order: <script src="NORMAL JAVASCRIPT STUFF"></script> // function ...

What are the pros and cons of passing an imported object from a parent component to its children as props versus directly importing that object within the children components?

My current project involves a helper object known as TimeHelper, which is used for time-related tasks. This object is required in multiple components within the top-level parent component. I am contemplating whether it would be advantageous to import Time ...

Having difficulty retrieving the value from an input field, despite trying both text() and val() methods

I'm struggling to retrieve the value of an input field that a user enters and then use it in my code. I have attempted using both text() and val() to get the value from the input fields, but neither method seems to be working for me. If you have any ...

Creating space between flex items in Slick Carousel with Vue

This is my current Slick Carousel. There are 4 items in a row, and I am looking to insert some margin between each item while maintaining the existing aspect-ratio: 1.3/1; I'm struggling with overriding the classes from vue-slick-carousel. Does any ...

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Having trouble sending input data from a form to my nodejs endpoint. When I try printing the req.body, it shows up as undefined and I can't figure out why. Here is the relevant API code snippet: var bodyParser = require('body-parser') var e ...

Tips for running a post-installation script when deploying an Angular 4 application to an Azure website using KuduScript

I recently faced an issue with my angular4 app deployed on azure web app (website) using Deployment Options through the Portal. To customize the deployment script, I utilized kuduscript [kuduscript -y –node] and modified deploy.cmd to specify how Azure s ...