The console is showing the Ajax Get request being logged, but for some reason it is not displaying on the

Could someone please explain why this response isn't displaying on the page?


    $.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    contentType: 'application/json; charset=utf-8', 
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
     'https://data.nba.com/data/v2015/json/mobile_teams/nba/2017/scores/gamedetail/0011700003_gamedetail.json',
  function (data) {
    console.log("THE RESPONSE ", data);
    setTimeout(function(){
      $("#viewer").html(data);
    }, 4000);

});

HTML

<div id="viewer"></div>

https://jsfiddle.net/nolaandy/df0jsdL0/1/

In the provided JSFiddle, a JSON object is logged in the console. Despite trying to display the entire response in the "viewer" div, nothing appears. What could be causing this issue?

javascriptajaxget

Answer №1

The reason why nothing is appearing on the screen is because $.html() requires a string to display as HTML, but you are providing an object instead.

If you want your object to be shown as a string, you can rewrite it like this:

$("#viewer").html(JSON.stringify(data));

This might get messy, especially if the object is large. For debugging purposes, it's recommended to use the console instead.

Check out the Fiddle here: https://jsfiddle.net/0x3j7fk1/

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 it possible to create a dynamic drop-down list in PHP using an array?

In the image above, a new row will be added when the user clicks on the [add more] button. While this functionality works perfectly, I would like to send these values using AJAX. I am able to access all textbox values with the array map function in AJAX ex ...

phpjqueryajaxmysqlidrop-down-menu

What is the best way to activate a click event in Vue.js?

Hey there! I'm facing a situation where I have a button within the child component that emits an event when clicked. Is there a way to trigger this event when the parent component is mounted? Alternatively, is there another method to achieve this goal ...

javascriptvue.jsvuejs2vue-component

The switchView feature is currently malfunctioning and unable to access the content on the next page

For my application's admin panel design, I've divided my home into containers. The aim is to display details of clicked items in Images.html and Categories.html when a menu item in the 2nd container (also known as side bar) is clicked. However, m ...

javascripthtmlnode.jsbootstrap-4

The multiple checkbox filter is not showing the right results

I am currently working on a code snippet, but unfortunately, I am facing some challenges in getting it to function as expected. The issue lies with the checkboxes that are meant to filter the list and update the screen live using AJAX. While the multiple ...

phpmysqlajaxjsoncheckbox

Picture with predetermined size to occupy entire container

Seeking assistance! I am looking to pixelate an image after a jQuery event without using plugins like pixelate.js as they are not suitable for my project. Is it possible, through CSS or JavaScript, to automatically change the image to a smaller version wi ...

javascriptjquerycsspixelate

Linking query branches without encountering the "Exceeded the number of hooks rendered during the previous render" error

This apollo client utilizes a rest link to interact with 2 APIs. The first API returns the value and ID of a record, while the second API provides additional information about the same record. I combine this information to render the content without using ...

javascriptreactjsapolloreact-apollo

Utilizing the Squared² Symbol in the Jscript File Path for Execution

I am encountering an issue with launching applications on a corporate portal that are tied to a specific business group. The problem arises when trying to access a file path that includes a ² character. This software is widely used on over 3000 computers ...

javascriptjscript

Decode my location and input the address before validating it

While I have come across numerous plugins that enable geolocation and display it on a map, I am searching for something unique. I am interested in implementing geocoding when a user visits the page with an option to "allow geolocation." If the user agrees ...

javascripthtmlgeolocationgeocoding

What is the best way to access the parent document of a Firestore collectionGroup query?

I'm currently working on accessing the parent documents of all subcollection queries in my database structure. The setup I am aiming for is something like this: /production/id/position/id/positionhistory While I have successfully retrieved all the d ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestore

How can I fix the error "rootRef.current.contains is not a recognized function" when using the Transition Component in react-transition-group with the latest versions

I am in the process of updating a project from Material-UI 4 to MUI v5, and I have also upgraded react to v18. We utilize the Transition component from react-transition-group within a Modal in one of our components. However, I encountered an error stating ...

javascriptreactjsmaterial-uitransitionreact-transition-group

Transferring PHP array data to JavaScript using JSON

Hello there! I'm currently working with a PHP file that uses json_encode to encode an array. This file is then accessed by the jQuery ajax function to fetch the array. However, I'm having trouble understanding how to properly utilize the array. W ...

jqueryajaxarraysjson

The length of the notification is determined by the ReadFlag

JS: function fetchNotifications(){ $.ajax({ url: "getgroupednotification.json", type: "GET", crossDomain: true, success:function(response){ ...

javascriptjsonajax-request

Utilize CSS to vertically align buttons

One of my current projects involves creating a panel with buttons organized in columns side by side, similar to the layout shown below: However, I am struggling to achieve this desired arrangement. Below is the code I have been working on: <style&g ...

javascripthtmlcssforms

Using ajax with Django to optimize queries involving select_related() and many to many fields

Seeking help with a view that needs to handle both ajax and regular HTTP requests. Here's a simplified version of what I have: def tag_search(request, tag): items = Item.objects.filter(tags__tagname__exact=tag) if request.is_ajax(): ...

jqueryajaxdjangojsonmany-to-many

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...

javascriptjqueryhtmlcss

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs

Karma is unable to locate the module within the specified relative path

I'm facing a challenge with Karma not being able to load a specific file. As a novice in Karma, I dedicated the entire day to researching and checking documentation for similar issues with no luck. Upon initiating the karma process, it encounters an ...

javascriptnode.jsunit-testingkarma-runnerbrowserify

Using React to Calculate the Total Value of Child Components within the Parent Component

In this scenario, the parent component has access to the values of the child components but struggles to calculate the sum correctly. Instead of displaying the accurate total, it shows 0. https://i.sstatic.net/1etAx.png The expected behavior is for the To ...

javascriptreactjsreact-props

eliminate a mesh from the view following a mouse hover event triggered by a raycaster

            When loading a gltf model, I want to make sure that a mesh is only displayed when the object is hovered over. I have successfully managed to change its material color using INTERSECTED.material.color.setHex(radioHoverColor); and reset it ...

javascriptthree.js

Guide to uploading a JavaScript File object to Cloudinary via the node.js API

After researching various options, I decided to use cloudinary for uploading a file to an image server from my node js api. I successfully installed the npm package for cloudinary and implemented the code based on their api documentation Below is the fun ...

javascriptnode.jsfilecloudinary