Inject JSON result into an HTML div after an AJAX request

I have successfully implemented a JavaScript AJAX call that returns JSON data, and now I am trying to display it on my HTML page.

Here is the code snippet I am using:


success: function(response) {
console.log(response);
for (var i=0; i < response.length; i++) {
$('#main').append('<div class="name">' + response[i].name + '</div>');
}
},
error: function(response) {
alert(response);
}
});

Although the JSON data is being printed correctly in the console, nothing is appearing on the actual website.

I have already set up a div element to capture the data:

<div id="main">Test</div>

Can anyone help me figure out what I might be doing wrong?

EDIT: The response logged in the console looks like this:

{totalPages: 0, firstPage: true, lastPage: true, numberOfElements: 0, number: 0, …}
columns: {columnIds: Array(3)}
firstPage: true
lastPage: true
number: 0
numberOfElements: 0
oberonRequestXML: [null]
oberonResponseXML: [null]
summaryData: {totals: Array(3)}
totalElements: 0
totalPages: 0
__proto__: Object

Answer №1

It seems that your JSON response is not structured as an array, so the loop you are using may not work correctly. Additionally, it looks like you are expecting objects with a "name" attribute in the array, but this attribute is missing from the response.

If you are accessing the correct JSON service, the only data you can iterate through is stored in two attributes: "columns.columnIds" and "summaryData.totals". You can try to display this information by modifying your code like this:

console.log(response);
for (var i = 0; i < response.columns.columnIds.length; ++i) {
    $('#main').append('<div class="name">'
                 + response.columns.columnIds[i] 
                 + ': '
                 + response.summaryData.totals[i] + '</div>');
}

Keep in mind that these values must be primitive types based on the response provided.

However, please note that this code will not display any "name" property values because they are not present in the JSON data as shown in your question.

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

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

Choosing radio buttons within rows that contain two radio buttons using ngFor

This section showcases HTML code to demonstrate how I am iterating over an array of objects. <div class="row" *ngFor="let item of modules; let i = index;"> <div class="col-md-1 align-center">{{i+1}}</div> <div class="col-md- ...

jQuery AJAX issue: No headers or response displaying in console

I am currently working on updating a web application. The live version of the app can be accessed at . We are implementing changes within the district, and I am in the process of modifying the app to accommodate these updates. My work involves three diffe ...

Guide to using a JSON WCF service in C#

I have a JSON web service. The address is provided. The WSDL code includes the following: <wsdl:binding name="BasicHttpBinding_iBOER" type="tns:iBOER"> <soap:binding transport="http://schemas.xmlsoap.org/soap/http" /> - <wsdl:operation n ...

Creating a scrollable div in Electron

I'm currently developing a basic Markdown application using Electron. At the moment, all I have is a textarea, a div, and some Javascript code that retrieves the text from the textarea, processes it with Marked (an NPM module), and updates the content ...

Ways to avoid route change triggered by an asynchronous function

Within my Next.js application, I have a function for uploading files that includes the then and catch functions. export const uploadDocument = async (url: UploadURLs, file: File) => { const formData = new FormData(); formData.append("file" ...

The MongoDB object type is not stored

Let me share my customized user schema below. var userSchema=mongoose.Schema({ //name:{type:String}, username: {type:String, required:true, unique:true}, password: {type:String, required:true}, habit: {type:Object, required:true} }); Howev ...

Unable to render text onto an html5 canvas

Currently delving into JS after having experience in other programming languages. My focus right now is on creating a canvas that can display text. https://jsfiddle.net/b5n2rypn/ The issue at hand: Despite using the fillText method, no text appears on th ...

Combining and updating JSON data, filtering out unwanted entries, and increasing the

I am currently developing a website scraping solution using nightmare.js. My server continuously receives new JSON files via XHReq (the server's filters are constantly changing and new JSON files are being received via XHReq - an ajax website). Each ...

Retrieve Username API for forgetful users

Currently, I am working on implementing a new REST service for our API, and I would like to gather some insights on the most effective approach. This service is designed to retrieve a user's email address in case they have forgotten their username. To ...

Transforming a dynamic background image into dynamic HTML elements

Having trouble parsing a background image to HTML elements. The images are retrieved from a database and the HTML elements are dynamically created. However, the image is not displaying. I attempted to include JavaScript in the while loop but encountered ...

Issue with title position when hamburger menu opens

My title, "Roberto Salas," is not staying in place when I resize the window or view it on my cellphone. You can see an example of this issue here. If the hamburger menu button drops down, the title is also not in the correct position. See an example here. ...

Identify the mistake using the callback function

My middleware was developed to utilize an external code for managing user accounts. When creating a new account, I rely on the Manager's function with the following code snippet: .post(function(req,res,next){ UsersManager.createUser(req.body. ...

Update the JavaScript to modify the styling based on the specific value of the

Is there a way to apply specific style properties to images only if they already have another property? I've managed to achieve this with the following code snippet: if ($('#content p img').css('float') == 'right') $ ...

Securing ajax content: Best practices for protecting your dynamic data

While exploring almaconnect.com, I noticed a feature on the home page where a textbox automatically suggests universities as you type. The content is loaded using an ajax call. Attempting to replicate the ajax call by making a curl request resulted in encr ...

What's the point of repeatedly confirming prompts?

I am using Jquery ajax call to delete data from my HTML table. Everything works fine, but the alert message keeps showing repeatedly. What could I be doing wrong? Delete button "<a href='#my_modal' class='delete-Record'>Del ...

What is the best way to clear a canvas when the erase button is clicked using sketch.min.js?

I incorporated the sketch.min.js file obtained from this source. The functionality I aimed for was that clicking on the Eraser link should directly erase the canvas. To avoid the need of clicking twice on the eraser link and canvas, I required that a sing ...

Exploring touch events and input focusing on mobile devices using JavaScript

Recently, I integrated a JS touch mapping function into one of my pages sourced from Stack Overflow. This was necessary to enable my jQuery draggables to work on iOS Safari, as drag and drop functionality was not functioning without this mapping. Here is ...

Extract information from a JavaScript function utilizing Python's Selenium

Is there a way to extract data from within a JavaScript function using Selenium? Visit the page here Here is the input code: <script type="text/javascript"> var chartData1 = []; var chartData2 = []; var chartData3 = []; ... ...

What is the proper way to connect with the latest Set and Map objects?

Can Angular 1.* ng-repeat function with Set and Map new objects? Is there a roadmap to implement this integration? ...