Using JavaScript to update a JSON object based on a specific value

In my json array called JsonTempArray, I have two fields: mappingId and Name.

When Male or Female is clicked, it will automatically generate 5 mappingIds (1 to 5) with the Name field empty. Example:

JsonTempArray[length] = {
   mappingid: Number, //Number ranges from 1 to 5
   Name:""
 }

For each of the 5 people, there are text boxes to fill in their names.

I have the following code snippet to update the Name field:

for(var len=0;len<JsonTempArray.length;len++)
     {
       if (JsonTempArray[len].Mappingid === mapid ) {
           JsonTempArray[len].Name = document.getElementById('txtName'+len).value;
            }
      }

Particular mappingId is passed when clicking on a textbox. For example:

1 John
2 Jack
3 Kin
4 Fin
5 Hol

However, after updating, the JsonTempArray looks like this:

5 Hol
5 Hol
5 Hol
5 Hol
5 Hol

I need assistance in updating each value in the loop. Thank you for your help.

Answer №1

The mistake lies in the fact that instead of comparing, you were inadvertently assigning a value:

if (JsonTempArray[len].Mappingid= mapid ) {

It should actually be:

if (JsonTempArray[len].Mappingid == mapid ) {

Answer №2

After some investigation, I discovered the solution to my problem. It turns out that using a for loop was not necessary in this particular case.

JsonTempArray[id].Name= document.getElementById('txtName'+id);//id is 1/2/3/4/5(mappingid)

I appreciate the assistance provided. Thank you.

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

Restarting an Angular app is necessary once its HTML has been updated

I've encountered an interesting challenge with an application that combines MVC and Angular2 in a not-so-great way. Basically, on the Index page, there's a partial view loading the Angular app while also including all the necessary JavaScript li ...

The unusual spinning behavior of child elements in three.js

My current project involves implementing an experimental version of a 2x2x2 Rubik's Cube. I have gathered insights from two previous posts that addressed issues related to attaching and detaching child objects in Three.js: Three.js: Proper way to add ...

How to add and append values to an array in a Realtime Database

My React.js app allows users to upload songs to Firebase and view the queue of uploaded songs in order. The queue can be sorted using a drag-and-drop system that updates the database in Firebase. Is there a way to insert these songs into an array when uplo ...

Retrieve an image URL from the content field in a JSON file and display it as an image in an Android app

I've successfully managed to parse JSON data, extracting and displaying all the necessary information. One particular string within my JSON is labeled as Content. This particular string is quite extensive, containing a large amount of text. Hidden som ...

Struggling with making jQuery match elements' heights

I'm having trouble getting the heights of my buttons to match with the code below. I've already imported jQuery, but for some reason it's not working as expected. Any suggestions on how to fix this issue? It's likely a simple mistake th ...

Unable to halt ajax request by pressing cancel button

There's a jQuery script that I have implemented. When a button is clicked, it triggers an AJAX function to count the number of rows from a specific query and stores the result in a jQuery variable upon successful completion. Subsequently, another AJA ...

A centralized hub for managing all AJAX callback functions for a specific JavaScript call

When interacting with a server using JavaScript in my single-page browser application, I aim to implement a callback function that will always be executed after receiving a response from the server, regardless of whether it was successful or resulted in an ...

Tips to prevent browser from freezing while creating a large number of HTML elements

I am currently utilizing Selection.js to develop a customizable grid on my website. To make this work effectively, I need a specific number of div elements to establish the selectable area. In my scenario, I generate all the divs using a for loop and then ...

Developing a MySQL Community Server-backed RESTful Web Service with the power of jQuery AJAX

I am currently in the process of developing a RESTful Web Service using MySQL Community Server alongside jQuery AJAX Unfortunately, my usage of jQuery AJAX is not functioning as expected. When attempting to add, delete, update a product, or retrieve all p ...

What steps can be taken to address the build problem with Angular version 13?

Encountering a problem while working with Angular 13: https://i.sstatic.net/CbAUhh6r.png Attempting to build using ng build --configuration=test, however facing errors as mentioned above. Interestingly, if I remove the reference to bootstrap.min.css in t ...

Error: Value not found starting at position 1 in the JSON data

Dealing with an escaped string stored in a variable, I encountered an issue while trying to convert it into a JSON object. An Exception was thrown which read as follows: org.json.JSONException: Missing value at character 1 After conducting extensive resea ...

Passing on Query Params in NextJS from Previous Page

Is there a way to automatically pass the parameter from the current URL to the next URL when the router changes? For example: Current URL: localhost:3000/dashboard/?name=abc When moving to the page /profile, I would expect the new URL to be like th ...

Utilizing Node.js createReadStream for Asynchronous File Reading

For a specific project, I developed a module that is responsible for splitting files based on the '\r\n' delimiter and then sending each line to an event listener in app.js. Below is a snippet of the code from this module. var fs = req ...

Google Maps Circle Radius Functionality Malfunctioning

I've been trying to implement a map scaling feature using a slider in my code but I'm having trouble getting it to work. While the map is displaying correctly, the radius won't update as intended. Any assistance with this would be greatly ap ...

Experience seamless transitions with Material UI when toggling a single button click

When looking at the examples in the Material UI Transitions documentation, I noticed that there are cases where a button triggers a transition. In my scenario, I have a button that triggers a state change and I want the previous data to transition out befo ...

Designing a content carousel specifically optimized for mobile devices

I'm currently working on creating an image slider that is responsive to screen size, specifically functioning when the screen width is less than 640 pixels. For wider screens, it should display 3 items with 33% width to fit nicely. I have been able to ...

Add a data attribute to an HTML element within JSX without assigning any value

Initially, I encountered a challenge when attempting to add an attribute to a custom element/component. I found that I could only add it to non-custom elements such as div and input. https://codesandbox.io/s/react-16-966eq const dAttribute = { "data-rr-m ...

Ensuring that files adhere to the required format, whether they be images

Three separate input fields are being used, each with its own name for identification. A validation method is called to ensure that the files selected in these input fields are not duplicates and that they are either images or PDFs but not both. While thi ...

PHP-powered Countdown Timer for triggering a button's action

Hey everyone, I could use some assistance. Here's my situation - I have a database table with a column called "created_time" that stores the current system time in HH:MM AM/PM format. I want to have a button on one of my PHP pages named "Start Exam" t ...

Loading images using javascript

An example of an image in the DOM: <img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/c/cf/Frog_on_river_4000x3000_26-09-2010_11-01am_2mb.jpg"> </img> I have attempted to receive a console notification when the image finishes ...