Transmitting data in JSON format via a RESTful API

I am working on generating the following structure:

 [
        {
            "id":"1",
        },
        {
            "id":"3",
        },
        {
            "id":"5",
        },
        {
            "id":"6",
        },
        {
            "id":"9",
        },
    ]   



    Person = {
                "id" : Id
            }; 

    PersonArray.push(Person);
    tempPersonJson['PersonList'] = JSON.stringify(PersonArray);

This is what I am getting as output:

List = "[{\"id\":\"12\"},{\"id\":\"10\"},{\"id\":\"9\"},{\"id\":\"8\"},{\"id\":\"7\"},{\"id\":\"6\"},{\"id\":\"5\"},{\"id\":\"4\"},{\"id\":\"3\"},{\"id\":\"2\"},{\"id\":\"1\"},{\"id\":\"12\"},{\"id\":\"10\"},{\"id\":\"9\"},{\"id\":\"8\"},{\"id\":\"7\"},{\"id\":\"6\"},{\"id\":\"5\"},{\"id\":\"4\"},{\"id\":\"3\"},{\"id\":\"2\"},{\"id\":\"1\"}]";

The API raises an issue with this:

Call Body Expected body: Content-Type is application/json but body is not a parseable JSONParse error on line 21: ...value": true },] ---------------------^ Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got ']' Watchout for malformed JSON. Expected data media type ('null') does not match real media type ('application/json').

Update, JSON sent to server:

[{"id":"12"},{"id":"10"},{"id":"9"},{"id":"8"},{"id":"7"},{"id":"6"},{"id":"5"},{"id":"4"},{"id":"3"},{"id":"2"},{"id":"1"}]
javascriptjson

Answer №1

After some thought, I decided to give it a shot...I put together a jsfiddle with the necessary fixes.

var PersonData = {
            "id": '1'
        }; 

var arrayOfPeople = [];
arrayOfPeople.push(PersonData);
var tempPersonJsonObj = [];

tempPersonJsonObj['PersonList'] = JSON.stringify(arrayOfPeople);

console.log('tp',tempPersonJsonObj);

Click here for the working fiddle

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

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Trying to decipher a poorly formatted JSON response from a remote server that looks something like this: //[ {},{} ] In my AngularJS code: $http.get('http://www.example.com/badjson') .success(function(data) { console.log(data); }) ...

javascriptjqueryajaxjsonangularjs

Python script containing web scraping code in a <script> tag

I successfully extracted the script tag using BeautifulSoup and then converted it into a json object. The specific information I need is located within data['x'], but it's enclosed by b tags. For example: <b>infoiwant</b><br&g ...

pythonjsonseleniumweb-scrapingbeautifulsoup

How can I search for or update a column name using PHP?

Struggling to wrap my head around how to construct an insert statement in PHP for a SQL database based on incoming JSON data. The JSON includes questions and answers, but the challenge lies in mapping them to the database table structure. On the front end, ...

phpmysqlsqljson

Issue with the side panel: unable to close it

There seems to be an issue with the close button on the sidebar—it's neither displaying nor functioning properly. The show sidebar feature works perfectly fine, but there is a problem with the closing function. Below is the HTML, CSS, and JavaScript ...

javascripthtmlsidebar

Assign a value to the Angular directive for the SharePoint People Picker

In my create form, I have successfully used a directive to capture and store values in SharePoint via REST. The directive I am using can be found at this link. Within my HTML, I am implementing the directive like this: <sp-people-picker name="CC" id=" ...

javascriptangularjssharepoint

Utilizing props to transfer data between components in ReactJS

I have a React application where I am binding text values when a specific div is clicked. However, I am now faced with the challenge of passing these text values to another component using props. This is what my code looks like: class PostOptionBar exten ...

javascriptreactjscomponents

Refreshing the DataTable with new data using DataTable.ajax.reload does not appear to be effective

Feeling like I'm hitting my head against a brick wall right now. I have a Datatable that is supposed to be populated by a GET call to an API based on the selection from a dropdown box. The goal is for the user to choose an option from the dropdown and ...

javascriptasp.netdatatables

Avoid including jQuery as a requirement when using Browserify

After extensively searching the internet, I still haven't found a solution to my current problem. I am using the latest versions of Gulp and Browserify to bundle up JavaScript for a website project I'm working on. Previously, we concatenated all ...

javascriptjquerynode.jsgulpbrowserify

A guide to leveraging Vue's Dynamic Component with a Fragment

Is it feasible to utilize Vue's <component> element to selectively display a component or nothing at all? Let's consider the following scenario: <component :is="hasTooltip ? 'CustomTooltip' : 'div'"> & ...

javascriptvue.jsvuejs2vuejs3

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

javascripthtmlhtml-selectdom-eventsmultiple-select

Discover the most frequently repeated elements in a JavaScript array

I'm working with an array that contains multiple names such as: [mike, bob, john, john, rick, bob] Could anyone advise on the most efficient method to determine which name appears the most frequently? ...

javascriptarrays

Passing data from the front-end of an Angular component (app.component.html) to the back-end of another component (other.component.ts)

Imagine a scenario involving basic crud operations. Within the app.component.html file, there are multiple input fields and buttons. Upon clicking a button in app.component.html, the value of an HTML field is sent to the 'other.component.ts' comp ...

javascriptangulartypescriptangular2-formsangular2-ngmodel

Encountering the error "undefined object" while using the yield keyword in JavaScript

var pi = document.getElementById("pi"); function * calculatePi(){ let q = 1; let r = 0; let t = 1; let k = 1; let n = 3; let l = 3; while (true){ if (4*q+r-t < n*t){ alert(n); yield n; ...

javascripthtmlgeneratoryield

ReactJS is unable to locate a valid DOM element within the target container

I recently embarked on my journey to learn ReactJS and I celebrated successfully writing my first code. However, when I encountered the same pattern with components, an error popped up stating _Invariant Violation: registerComponent(...): Target container ...

javascriptjqueryhtmlreactjsbabeljs

Attempting to incorporate a factory within a restricted function

Just starting out with AngularJS and I have a question. Can I use a factory code (logger) inside a private function like the example below? I'm still working on understanding angular concepts. Thanks for your help: (function () { 'use strict ...

javascriptangularjs

Unable to retrieve source material. Server encountered a 500 error during the request

When I try to enter a password on a website, if the password is correct, it should redirect me to index.php. However, if the password is incorrect, it should allow me to try again. But why am I receiving an internal server error 500? jquery-1.12.4.min.js: ...

javascriptphpajax

How can I utilize `event.target` to specifically target sub-components and modify their styling?

Can we utilize the event.target property to specifically target and modify the style of sub-components? export default function CustomComponent(props) { function onMouseOver(event) { if (event.target.className === "container") { event.target.st ...

javascriptreactjseventsevent-handling

Unable to include additional response headers

Here is the code snippet I am currently using: const securityHeaders = [ { key: 'X-XSS-Protection', value: '1; mode=block' }, { key: 'Referrer-Policy', value: 'origin-when-cross-origin' } ] m ...

javascriptnext.js

Live calculation feature for dropdown menus

I have a form where I need to calculate the total result after submission. The package and event ID should be added together, and the guest field should always be calculated (guest value * 5). The final result should be displayed in <div id="result"> ...

javascriptphpajaxcalculator

Angular2 - Implementing Form Validation for Dynamically Generated Input Fields Based on Conditions

My goal is to create a basic form that allows users to select between two options: Local and Foreigner. If the user does not make a selection, the form should be marked as invalid. Choosing Local will make the form valid, while selecting Foreigner will rev ...

javascriptangularjsformsvalidationangular