Creating JSON from identical user interface components

I have created a form similar to this one: https://jsfiddle.net/6vocc2yn/ that generates a JSON output like below:

    {
  "List": [
    {
      "Id": 10,
      "Name": "SDB_SOLOCHALLENGE_CHALLENGE_DESC_10",
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2f2c2d602f2c2d0e363734602d2123">[email protected]</a>",
      "message": "SDB_SOLOCHALLENGE_CHALLENGE_BACKGROUND_IMAGE_10",
      "someOtherList": [
        {
          "a": 10,
          "b": 14
        }
      ],
      "opponentFighterItemDefinitionId": 4294967295,
      "title": "abc"
    }
  ]
}

I am looking to add an 'Add' button that will reset the current fields, save the information, and append the new input provided by the user next time.

For example:

{
      "List": [
        {
          "Id": 10,
          "Name": "CHALLENGE_DESC_10",
          "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b3b0b1fcb3b0b192aaaba8fcb1bdbf">[email protected]</a>",
          "message": "BACKGROUND_IMAGE_10",
          "someOtherList": [
            {
              "a": 10,
              "b": 14
            }
          ],
          "oppId": 111,
          "title": "abc"
        },

       {
      "Id": 11,
      "Name": "CHALLENGE_DESC_11",
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117073723f7073725169686b3f727e7c">[email protected]</a>",
      "message": "CHALLENGE_BACKGROUND_IMAGE_11",
      "someOtherList": [
        {
          "a": 11,
          "b": 15
        }
      ],
      "oppId": 222,
      "title": "abc"
    }
      ]
    }

What is the most effective way to merge using .push method?

Answer №1

let infoObject = {
    Records: []
};

document.getElementById('submit').addEventListener('click', function(e) {
    e.preventDefault();
    let inputInfo = {
        fullName: document.getElementById("fullName").value,
        email: document.getElementById("email").value,
        message: document.getElementById("message").value
    };

    infoObject.Records.push(inputInfo);
    console.log(infoObject);

    // formId refers to the unique identifier of the form, "<form id="formId"..."
    document.getElementById("formId").reset();
});

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

JavaScript script that parses innerHTML

Does the behavior of element.innerHTML = '<script>alert()</script>'; differ across browsers? Can I consistently expect innerHTML to not parse scripts? ...

Utilizing ngClick and ngDisabled with a templated anchor element

I am currently developing a directive as follows: module.directive('myButton', function () { var directive = { compile: compile, restrict: 'E', scope: { type: '@', click: & ...

Changes on services do not affect the Angular component

Currently facing an issue with my Angular assignment where changing an element's value doesn't reflect in the browser, even though the change is logged in the console. The task involves toggling the status of a member from active to inactive and ...

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...

Timeout for asynchronous scripts

Recently diving into the world of Protractor and trying out Protractor-net. Encountering an "Asynchronous script timeout: result not received in 0 seconds" error when executing Protractor-net scripts. If you're curious about Protractor-net, check it ...

Parent and router-outlet in Angular 4 fashion

Suppose we are presented with the following code: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="c ...

The pagination feature in DataTable does not retain the edited page after making changes

I have been encountering an issue while using DataTable serverside processing. My datatable includes an edit column, and when the edit link is clicked, a jQuery dialog box appears. After submitting the dialog box, an ajax.reload call is made. However, the ...

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

I have a grid of content and posts displayed on multiple webpages. Users can select specific items from the grid to navigate to more detailed information on another page. Each webpage has its own grid which I want to filter based on a specific class. The ...

Retrieve a byte array from ASP.NET controller class

I'm working on a Controller class (using C#) that needs to return a byte array from its login method. Below is the source code for my Login functionality within the Controller class: [RoutePrefix("Account")] public class AccountsController : ApiC ...

Tips for preserving an HTML dynamic table in a database

I have a challenge where I am generating a dynamic HTML table using javascript. What is the best way to store this dynamic HTML table in a database using CodeIgniter? This is the code snippet for my input form: <table id="tb3" name="tb3"> & ...

How can I make a POST request from one Express.js server to another Express.js server?

I am encountering an issue while trying to send a POST request from an ExpressJS server running on port 3000 to another server running on port 4000. Here is the code snippet I used: var post_options = { url: "http://172.28.49.9:4000/quizResponse", ti ...

After retrieving parameters from the URL, the prior URL remains when I use res.render to load the page

When the task is to retrieve a product based on its product_id, for example hitting localhost:8080/products/44566 should respond with the product page for the specific product with the id 44566. In the Home page where products are displayed and clicking o ...

Pairing TMDb genre IDs and their respective names using JavaScript within the Ember.js framework

If you've ever worked with the TMDb (The Movie Database) api for movies, you might have encountered this issue. I am struggling to display the genre names for each movie shown. My goal is to replace the numbers in genre_ids from the movies api with th ...

Combining Two JSON Arrays Featuring Unique Keys

I have two JSON arrays with slightly different keys. The first JSON array contains the keys id, name, and title. The second JSON array includes id, title, forename, name, and company. I am wondering if it's possible to merge these two arrays so th ...

Enhance the functionality of your Rails application by implementing Ajax or jQuery to asynchronously load table elements separately from the page

Currently, I am facing an issue with a page that displays a list of user sites. The problem lies in the fact that I am making an API call for each site to check its status, which is causing the page to load very slowly. To address this issue, I would like ...

AngularJS expression utilizing unique special character

There are certain special characters (such as '-') in some angular expressions: <tr data-ng-repeat="asset in assets"> <td>{{asset.id}}</td> <td>{{asset.display-name}}</td> <td>{{asset.dns-name}}</td&g ...

Attaching a synchronous event listener to a form's submit button using JavaScript

I am currently tackling a security project in Javascript, a language I am not very familiar with, and I seem to be encountering some difficulties with EventListeners. Here is an excerpt of my code: function prevclick(evt) { evt.preventDefault(); document. ...

Stop HTML elements from shifting position when content is modified using JavaScript

'use strict'; const countdown = () => { // create function to calculate time until launch in Days/Hours/Minutes/Seconds // time difference const countDate = new Date('May 25, 2024 00:00:00').getTime(); const now = new Date( ...

creating dynamic lists in angular.js

Could you please guide me on creating a dynamic list in Angular.js? I have successfully implemented a feature where users can add items to the list by clicking a button and filling out the required fields. To see this in action, check out this fiddle: http ...

Producing asynchronous JavaScript events using a browser extension (NPAPI)

Currently in the process of developing a web browser plugin using NPAPI. The issue I am facing is that my plugin requires a worker thread to handle certain tasks, and I need to pass events back to JavaScript as the worker progresses. However, due to the N ...