Ways to insert JSON information into a designated index within a different JSON file with the help of AngularJS

Here is the response in json format retrieved from the API:

{
    "columnHeaders": [
        {
            "columnName": "id",
            "columnType": "bigint",
            "columnLength": 0,
            "columnDisplayType": "INTEGER",
            "isColumnNullable": false,
            "isColumnPrimaryKey": true,
            "columnValues": [],
            "visibilityCriteria": []
        },
        {
            "columnName": "client_id",
            "columnType": "bigint",
            "columnLength": 0,
            "columnDisplayType": "INTEGER",
            "isColumnNullable": false,
            "isColumnPrimaryKey": false,
            "columnValues": [],
            "visibilityCriteria": []
        },

        {
            "columnName": "countries",
            "columnType": "int",
            "columnLength": 0,
            "columnDisplayType": "CODELOOKUP",
            "isColumnNullable": false,
            "isColumnPrimaryKey": false,
            "displayName": "null",
            "dependsOn": 0,
            "orderPosition": 0,
            "visible": false,
            "mandatoryIfVisible": false,
            "columnValues": [
                {
                    "id": 19,
                    "value": "India",
                    "score": 0,
                    "parentId": 0
                },
                {
                    "id": 20,
                    "value": "USA",
                    "score": 0,
                    "parentId": 0
                }
            ],

            "columnCode": "countries",
            "visibilityCriteria": []
        }
    }
]

I now need to include the following json data into my current json dataset.

"columnValuesLookup": [
                {
                    "id": 19,
                    "value": "English",
                    "score": 0,
                    "parentId": 0
                },
                {
                    "id": 20,
                    "value": "SA",
                    "score": 0,
                    "parentId": 0
                }
            ],

How can I insert this json data at a specific index within the existing json object so that the final json appears like below:

{
    "columnHeaders": [
        {
            "columnName": "id",
            "columnType": "bigint",
            "columnLength": 0,
            "columnDisplayType": "INTEGER",
            "isColumnNullable": false,
            "isColumnPrimaryKey": true,
            "columnValues": [],
            "visibilityCriteria": []
        },
        {
            "columnName": "client_id",
            "columnType": "bigint",
            "columnLength": 0,
            "columnDisplayType": "INTEGER",
            "isColumnNullable": false,
            "isColumnPrimaryKey": false,
            "columnValues": [],
            "visibilityCriteria": []
        },

        {
            "columnName": "countries",
            "columnType": "int",
            "columnLength": 0,
            "columnDisplayType": "CODELOOKUP",
            "isColumnNullable": false,
            "isColumnPrimaryKey": false,
            "displayName": "null",
            "dependsOn": 0,
            "orderPosition": 0,
            "visible": false,
            "mandatoryIfVisible": false,
            "columnValues": [
                {
                    "id": 19,
                    "value": "India",
                    "score": 0,
                    "parentId": 0
                },
                {
                    "id": 20,
                    "value": "USA",
                    "score": 0,
                    "parentId": 0
                }
            ],
            "columnValuesLookup": [
                {
                    "id": 19,
                    "value": "English",
                    "score": 0,
                    "parentId": 0
                },
                {
                    "id": 20,
                    "value": "SA",
                    "score": 0,
                    "parentId": 0
                }
            ],
            "columnCode": "countries",
            "visibilityCriteria": []
        }
    }
]
javascriptjsonangularjs

Answer №1

let data = JSON.parse(data1)
data.headers[2].lookupValues = JSON.parse(info2).lookupValues 
JSON.stringify(data)

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

Using the WooCommerce API to handle multi line JSON data

I've experimented with various solutions to make this function properly. text1\ntext2 text1\\ntext2 text1\r\ntext2 Unfortunately, none of these methods have worked. After manually creating a product in WordPress with mul ...

jsonwordpresswoocommercemultiline

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Nginx rewrite in Angular only affects domain/foo, not domain/foo/bar, directing traffic to the Angular root

Transitioning from Apache to Nginx with Angular JS and a Laravel backend has been quite a challenge. The front and back ends are set up independently at var/www/angular and var/www/laravel, respectively. They are both served from the same domain - mysite. ...

angularjsnginx

Leverage the JSON information retrieved from a WebApi to enhance functionality in an AngularJS

After making a request to a WebApi, I received JSON data as a response. However, when trying to access this data from angularJS, I encountered an issue. The structure of the data is as follows: { "$id": "1", "result": [ { "$id": "2", " ...

jsonangularjsasp.net-web-api

Troubles with Angular Js: Issues with using $http.put with absolute URLs

Having an issue with $http.put in AngularJS. My server is built with Node.js and my app is in AngularJS. I am trying to make requests from AngularJS to access data on the Node.js server (same host). This code works: $http.put("/fraisforfait", elements); ...

javascriptangularjsnode.js

Extract information from a JSON string using a foreach loop to handle multiple occurrences of the same data type

I am working with a JSON object that I need to parse in order to retrieve specific data. The structure is as follows: "id": "5019b4b40cd8a056446b8eb4", "checkItemStates": [ { "idCheckItem": "xxxxxxxx", "state": "complete" }, { "idCheckItem ...

javascriptjsonparsing

"Error occurs when passing data back to main thread from a web worker: undefined data received

Hello, I’ve been experimenting with using a web worker to retrieve data and send it back to the main thread. However, I've encountered an issue with my code not working as expected. onmessage = (e) => { console.log(e); if( e.data[0] === &apos ...

javascriptvue.jsweb-worker

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Hey there, I'm fairly new to web development and I encountered a problem when trying to require two packages, franc and langs, in my index.js file. It turns out that franc is now an ESM only package, requiring me to import it and mention type:module i ...

javascriptnode.jsnpm

A guide to incorporating a textview into a React application using the Google Maps API

Wondering how to incorporate a textview within a react-google-maps component? Successfully setting up a Google map page in React using the react-google-maps API, I've managed to insert markers and link them with polylines. import React from "react"; ...

javascriptreactjsgoogle-mapstextviewreact-google-maps

Begin anew with Flip.js

Currently, I am incorporating the jquery flip plugin from nnattawat.github.io/flip to establish a card flipping mechanism on my website. I have successfully implemented the method outlined in the documentation to unregister the flip event from the elemen ...

javascriptjqueryhtmljquery-plugins

Is the JavaScript code not executing properly?

There seems to be an issue with this code as it's not displaying an unordered list of HTML elements as intended. I've written the script and HTML code using Sublime Text, but even after trying to run the script in Chrome's developer console ...

javascripthtmlscripting

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

I'm working on creating a canvas where users can draw symmetrical lines with their mouse. However, when I use the transform and scale attributes in the draw function to achieve this effect, it creates small gaps in the line and makes it look less smoo ...

javascripthtmlcanvas

UI-Bootstrap selectively adds modal backdrop to specific elements

I have encountered a unique situation with my application where I am displaying a UI-Bootstrap modal inside a div, positioned above a navigation bar. Typically, when the modal is launched, a backdrop (dimmer) covers the entire background. Interestingly, my ...

cssangularjstwitter-bootstrap-3angular-ui-bootstrap

Optimal technique for adding elements to the DOM using ngFor

My application features a websocket connected to an ngFor loop that populates data from approximately 100 records. Each entry in the list has a button with a click event attached, triggering the creation of a loading spinner via a 'div' element w ...

javascriptangulard3.jsngfor

Only one condition is met when using the Javascript if statement with the :checked and .bind methods

I need help creating an Override Button to disable auto-complete for a form using Javascript. I want the div "manualOverrideWarning" to display a warning if the button is selected, but my current function only works the first time the user presses the butt ...

javascripthtmljqueryif-statementradio-button

Struggling with converting JSON to JAXB with Jackson's ObjectMapper

I've encountered a challenge in my JAX-RS project related to JSON to JAXB deserialization using Jackson's ObjectMapper. The technologies/frameworks being used include: Jackson (FasterXML) 2.8.5 JAXB 2.2 The issue arises specifically with all I ...

jsonjaxbjerseyjacksonobjectmapper

What is the best way to send multiple variables to a url using jQuery ajax?

I am having trouble passing multiple values in the method below. Can someone help me with the correct syntax? I have attempted data: ('keyword='+$(this).val(),'id='10), as well as data: {'keyword='+$(this).val(),'id=&a ...

javascriptphpjqueryajax

Steps for inserting a filter button into the header of a ui-grid:

Is there a way to add a filtering enable/disable button inside the grid's header? You can check out this plunker to see the enable/disable filtering option, but I am looking to have it placed within the grid's header like shown in the image belo ...

angularjsfilterangular-ui-grid

Creating variables within an AJAX 'success' callback function in JavaScript

$(document).ready(function() { $.ajax({ url: 'objects.php', type:'GET', dataType: 'json', success: function(response) { var variable = [some_arra ...

ajaxjsonvariables

Steps to open specifically the WhatsApp application upon clicking a hyperlink, image, or button

I need a code for my HTML website that will open the WhatsApp application when a user clicks on a link, image, or button while viewing the site on a mobile device. Only the WhatsApp application should be opened when a user interacts with a link on my webs ...

javascriptjqueryhtmlwhatsapp