What is the best method for transmitting intricate nested JSON data from Angular Typescript to a Web Api?

My JSON data used to be sent "flat" and I have encountered 2 issues with this format.

For example, here is a TypeScript class model:

UserID: number;
AppID: number;
Key: string;
HearingsAndEventsType: number

In the past, I would send the above data like this:

{
   "UserID": 61525,
   "AppID": 15,
   "Key": "abc",
   "HearingsAndEventsType": 1
}

However, now I am required to send the data as a nested object with two changes to the JSON structure:

  1. "PageQueryString": {...
  2. },   "HearingsAndEventsType": 1

This means that the mandatory structure I need to send looks like this instead:

{
  "PageQueryString": {
      "UserID": 61525,
      "AppID": 15,
      "Key": "abc"
},
    "HearingsAndEventsType": 1
}

I previously posted a question on Stack Overflow asking for assistance regarding this issue. The question can be found at the following link:

Angular Typescript sending complex json data to web api when model is flat

Essentially, I have been using JSON stringify to send the model over, but adjustments are needed in order to structure the JSON correctly.

 getPageCommonData(menu: Menu)  {
    return this.http.post(pageCommonData, JSON.stringify(menu), httpOptions)
  ....
 }

Answer №1

To solve this problem, all you have to do is define two separate models:

class SearchParameters {
    Query: string;
    Filter: string;
    SortBy: string;
}

class Results {
    SearchResult: SearchParameters;
    DisplayType: number;
}

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

Is there a way to ensure that an external file function completes before proceeding with the main code execution?

In my project, I have two key JavaScript files: main.js and load.js. Within load.js, there are two essential functions - getData, which makes an AJAX post call, and constHTML, which appends data based on the JSON array returned from the AJAX call. This app ...

Laravel - customize email template for password reset - email.blade.php

In the email.blade.php file, you will find the code snippet below: @lang( "If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\n". 'into your web browser: [:actionURL](:actionURL)', ...

going to ('/') doesn't lead anywhere

Currently, I am utilizing React Router Dom version 6. As part of my web application functionality, I have created a Redux action named "logoutUser" in my userAction. In the dashboard view file "dashboard.jsx", I have implemented a logout button that should ...

Is it possible to retrieve a Video File Upload using PHP?

Imagine if I were to design a form with a basic "File Upload" input, it might look something like this: <div class="elementor-field-type-upload elementor-field-group elementor-column elementor-field-group- ...

How to securely return a JSON list in Flask?

I am aware of the security risks associated with using jsonify() on a list in Python Flask and that it has been disabled. However, I am unsure about the alternative solution... I have a list containing groceries that I need to work with using jQuery, and ...

URL validation RegEx in AngularJs using Javascript

I am looking for the following URLs to return as true other.some.url some.url some.url/page/1 The following URL should be flagged as false somerandomvalue Here is the regex I have been experimenting with so far: /^(?:http(s)?:\/\/) ...

How do I customize the HOME page in JHipster to display unique content based on user roles?

I am currently developing a JHipster project where I need to display different home pages based on the role of the user logging in. Specifically, I am utilizing Angular 1.x for this project. For instance, I have roles such as ROLE_ADMIN and ROLE_USER, each ...

The term "this" in the global scope versus within a function in the Node.js environment

console.log(this) // {} function abc(){ console.log(this) } abc() // global The concept of this can vary between the global space and inside a function in Node.js. console.log(this === module.exports) // true function abc(){ ...

input value does not change when the "keyup" event is triggered

I'm encountering an issue with the code below. The code is for a simple To Do app using Javascript. I followed a tutorial step by step, but my app isn't functioning as expected. When I press the enter key, the input value should be added to the l ...

Designing motion graphics for a browser game

As I delve into learning about Node.js, Angular.js, Socket.io, and Express.js, my current project involves creating a multiplayer poker game like Texas Hold 'Em. However, despite spending a considerable amount of time browsing the internet, I have bee ...

The term 'detailed' is not a valid property for the type 'Console'

I enjoy customizing my console logs. //-- Personalized console logging functions console.detailed = function(payload) { return console.log(util.inspect(payload, { showHidden: false, depth: null })) } console.notice = function(payload) { return co ...

Learn how to design a presentation template analog that delivers JSON instead of XML within the S&P platform

I currently have a presentation template in Search and Promote that returns XML responses. Now, I am looking to receive the response in JSON format. However, finding analogs of XML tags for JSON is proving to be quite challenging due to the complexity of ...

Creating a universal wrapper function to serve as a logging tool?

Currently, I am working on a generic JS function that can wrap any other function. The purpose of this wrapper is to execute the wrapped function, log the input and output events, and then return the output for "transparent" logging. However, as I attempt ...

Issue persisting with deleting objects in Node.js using the AWS SDK despite having AmazonS3FullAccess permissions, the correct bucket policy, and no restrictions on public access

Despite granting permission to the user with access key and secret access key for AmazonS3FullAccess, I still encounter issues. Initially, I added this user to a group with AmazonS3FullAccess, but later attempted to attach a policy directly to the user wit ...

karma plugin dependencies could not be located

Every time I execute karma start, the following issues arise: C:\devl\JS\myProject>karma start 06 09 2015 11:30:19.133:WARN [plugin]: Cannot find plugin "karma-chrome-launcher". Did you forget to install it ? npm install karma-chrome ...

The button on my VUE 3 quiz app is not changing to 'Finish' when I reach the final question

Struggling with my Vue 3 quiz app - everything works perfectly until I reach the last question. The button text should change to 'Finish' once the final question is loaded. Despite hours of searching and even using copilot, I still can't fin ...

Upon successfully maneuvering vendors who fail to load the NEXT.JS Link

Here is an image that is not displaying properly. The navbar's responsiveness seems to be causing the issue. return ( <Link key={index} href={'/'+item.id} > <li className="nav-item dropdown position-stati ...

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

import axios from "axios"; const Api = axios.create({ baseURL: "http://127.0.0.1:5000", }); axios.defaults.headers.common["Authorization"] = cookie; In server-side environment, document.cookie is not accessible. Alternat ...

NodeJs guide on removing multiple documents from a MongoDB collection using their _id values

Consider the following array of _ids: ["a12s", "33qq", "121a"] In MongoDB, there are methods such as deleteMany, which allows deletion based on specific queries: var myquery = { address: 'abc' }; dbo.collection("customers").deleteMany(myque ...

Looking for assistance with conducting data testing on an array

Hello everyone, I'm a newcomer to GM and I need some help with an array segment. Below is the code snippet that's giving me trouble: var A1_rest= ''; var A1reset_go = false; var auctiontyp = 0 var myJson = ' ...