An AJAX request fetching a dynamic list is populating a ko.observableArray

I'm currently attempting to connect to a Web service that returns a dynamic list. My goal is to retrieve the list in JSON format and then load it into a ko.observableArray. Despite my successful call to the Web service, I keep encountering errors during the loading process. Can someone help me identify if there's an issue with my syntax? 

function getEm(zip) {
    $.ajax('/Services/TheatreLocationList.asmx/getTheatres', {
        type        : 'POST',
        contentType : 'application/json; charset=utf-8',
        dataType    : 'json'
    }).done(function(data) {
        self.theatreData = ko.observableArray(data || [ ]);
    });
}
javascriptajaxjsonknockout.js

Answer №1

It's important to set the value of data before passing the argument. You can use console.log(json) to verify that you're receiving the expected response from your service call.

function retrieveTheatres(zip) {
    $.ajax('/Services/TheatreLocationList.asmx/getTheatres', {
        type        : 'POST',
        contentType : 'application/json; charset=utf-8',
        dataType    : 'json'
    }).done(function(json) {
        var data = json.length > 0 ? json : [];
        self.theatreData = ko.observableArray(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

Why aren't methods for JavaScript objects being identified as expected?

My current project involves creating an avatar that follows the movement of my mouse. After successfully developing a functional avatar, I'm now looking to replicate it using an object constructor. The only difference is that instead of var angleToBe ...

javascriptobjectthree.jsavatar

Identify when a user exits the webpage

Important! Please review this question before marking it as a duplicate I am looking for a solution that will automatically redirect a visitor to another page when they leave my webpage. The goal is to keep the page open and engage the user even if they s ...

javascriptjqueryhtml

Is it feasible to display an overlay div containing a loading image while handling postbacks instead of callbacks?

Can I display an overlay div with a loading image inside during postbacks, not callbacks? I had an OverlayOffDiv (modal) div working perfectly during callbacks. For some reason, in one of my pages, ajax mode caused some issues, so I had to switch to usin ...

asp.netajaxpostbackoverlaymodal-dialog

Sentry: Easily upload source maps from a nested directory structure

I am currently developing a NextJs/ReactJs application using Typescript and I am facing an issue with uploading sourcemaps to Sentry artefacts. Unlike traditional builds, the output folder structure of this app mirrors the NextJs pages structure, creating ...

javascripttypescriptnext.jssentry

"Uncovering the dangers of XMLHttpRequest: How automatic web-page refresh can lead

Hello, I have been developing a web interface for some hardware that utilizes an 8-bit microcontroller. The webpage includes HTML, JavaScript, JSON, and XHR (XMLHttpRequest) for communication purposes. My goal is to create a page that updates every 250 ...

javascriptajaxjsonmemory-leaksxmlhttprequest

What is the best way to send data to PHP while moving objects between different div elements?

I have a situation where I have two parent divs containing dynamic children divs, and I want to enable POST requests to PHP when items are dragged from one side to the other (and vice versa). Here is the Javascript code I am using: function allowDrop( ...

javascriptphphtmldrag-and-dropdraggable

Find the nearest element with a specific class using jQuery

I am currently using jQuery version 1.12.4 for the purpose of retrieving the value from the closest element with a specific class selector. Unfortunately, I am encountering difficulty in selecting the closest element as desired. $(function() { $("[cla ...

javascriptjquery

Using XMLHttpRequest to fetch a JSON object

Having trouble with returning an object from the getMine function in Javascript? Even though you try to print out the object, it keeps showing up as undefined. How can you successfully return the obj within this function? function getMine() ...

javascriptajaxjsonxmlhttprequest

Placing icons in a div at arbitrary positions using VueJS

I am looking to create a unique div where I can position multiple material design icons randomly. For example: Link to Example Image Previously, I achieved this using jQuery. Now, I want to achieve the same result using VueJS with material design icons ...

javascripthtmlcssvue.js

Ensure that both the top row and leftmost column are fixed in a vertical header using JQuery DataTable

Check out the implementation of vertical header flow in Datatables by visiting: https://jsfiddle.net/2unr54zc/ While I have successfully fixed the columns on horizontal scroll, I'm facing difficulty in fixing the first two rows when vertically scroll ...

javascripthtmljquerycssdatatable

Spacing Problem with Title Tooltips

After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...

javascripthtmlangulartypescript

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Hello there! I am currently learning, so please be patient with me. Currently, I am in the process of developing a web application for a product management system. The company I work for purchases products from multiple vendors, both through wholesale and ...

javascripthtmlcomboboxwebformsdrop-down-menu

Visualization of data using Highcharts rose diagram utilizing JSON format

I have a PHP script called data.php that retrieves JSON data from a MySQL database. Here is an example of the data: [[0,0.35,0,1.05,1.05,0.7,0.35], [0,0.7,0,1.05,1.74,1.74,0], [0,2.09,0,0.7,2.09,1.05,0.35], [0.35,1.74,0,1.05,1.05,1.05,0.35], [0.7,0.7, ...

jsonhighcharts

The 'else' statement does not seem to function properly with the 'src' attribute

I have been attempting to include alt text in a web page using jQuery with the code below. However, I am only able to get the correct value for the first image. The else if and else conditions do not seem to be working properly as I am unable to add alt ...

javascriptjqueryif-statementsrc

How to transform a string object into a JSON array using PHP

Is there a way to transform this data? $shipmentDet = '{"{\"Coupon\": \"\", \"PromotionName\": \"FREE Tighty Wifey\", \"DiscountAmount\": 23.75}","{\"Coupon\": \"get20\", \"Pr ...

phparraysjson

Ways to effectively verify errors in a JSON response using Python

When working with API responses that need to be saved to a database, 99% of the time everything runs smoothly. However, I recently encountered a problem where a response was missing the address['state'], causing the code to break and return False ...

pythonjsonpython-3.x

How can one obtain JSON as a string through retrofit?

I'm new to using Retrofit and I've been encountering a persistent issue for several weeks now. I attempted to retrieve my response as a POJO class, but I keep receiving this error message: "Json document was not fully consumed." Despite searching ...

androidjsonrestapiretrofit2

Can anyone guide me on implementing the if-then-else condition within a json schema?

In the latest version of JSON Schema (draft-07), a new feature has been introduced with the if, then, and else keywords. I'm struggling to grasp how to properly utilize these new keywords. Below is the JSON Schema I have created: { "type" ...

jsonvalidationjson.netjsonschema

What is the most efficient way to continuously query the same collection in MongoDB until a null or empty value is found?

I am encountering an issue with a nested object. Below is my collection. { "key": 1, "subKey": "" }, { "key": 2, "subKey": 1 }, { "key": 3, "subKey": 2 }, { "key": 4, "s ...

javascriptnode.jsmongodbmongoose-schema

Enhancing Drupal 7 form with dynamic loading and AJAX feature

I am currently working on implementing ajax submission for a dynamically loaded form within Drupal 7. While I know how to add AJAX functionality to a form that is loaded with the page initially, I am facing challenges when it comes to dynamically loaded f ...

phpajaxformsdrupaldrupal-7