Utilizing AJAX requests to retrieve JSON data and populate Datatables

Trying to figure this out, but all I'm getting is [Object object]. Can anyone assist me with this issue? I've been following the Datatables documentation, but still can't seem to get it right. Any help would be greatly appreciated... thanks

Here's my code:

Javascript

 $(document).ready(function() {
        $.ajax({
            url: "includes/view_ajax.php",
            type: "POST",
            cache: false,
            dataType: 'json',
            success: function(dataResult){
                alert( JSON.stringify(dataResult) );
                $('#memberdata').DataTable({
                    "searching": true,
                    "aaData": [dataResult],
                    "aoColumns": [
                      { "sTitle": "PlateNo" },
                      { "sTitle": "Make" },
                      { "sTitle": "Series" }
                    ] 
                });
            }
        });

PHP

<?php

$columns = array( 
// datatable column index  => database column name
    0 => 'PlateNo',
    1 => 'Make',
    2 => 'Series',
);
include 'database.php';
$sql = "SELECT * FROM vehicleinfo";
$res = mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));
$dataArray = array();
while( $row = mysqli_fetch_array($res) ) {


                 $PlateNo = $row["PlateNo"];
                 $Make = $row["Make"];
                 $Series = $row["Series"];
                 
                $dataArray [] =  array("PlateNo" => $PlateNo,
                                        "Make" => $Make,
                                        "Series" => $Series);


}

echo json_encode($dataArray);

?>

Answer №1

$('#memberdata').DataTable({
                    "searching": true,
                    "aaData": [dataResult],
                    "aoColumns": [
                      { "sTitle": "PlateNo" , mData:'PlateNo' },
                      { "sTitle": "Make", mData:'Make' },
                      { "sTitle": "Series", mData:'Series' }
                    ] 
                });

You should include the mData Property within each object of the Column arrays

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

When the status is set to "Playing," the Discord Audio Player remains silent

So, I'm in the process of updating my Discord audio bot after Discord made changes to their bot API. Despite my best efforts, the bot is not producing any sound. Here's a snippet of the code that is causing trouble: const client = new Discord.Cl ...

Tips for Searching in Multiple Columns within a JSON File Array

I came across a JSON file containing the following information : [ { "id": "apple", "symbol": "app", "name": "Apple", }, ] My goal is to search within this JSON file based on ...

Utilizing ES6 Functions to Transform Objects into Arrays

Is there a way to convert a JavaScript object into an array using ECMAScript-6? Take, for instance: var inputObj = {a:'foo', b:[1,2,3], c:null, z:55}; The desired outcome would look like this: ['foo', [1,2,3], null, 55] The seque ...

Removing the "<!doctype html>" tag from a document using cheerio.js is a simple process that involves

Is there a way to remove and <?xml ...> from an HTML document that has been parsed by cherio.js? ?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran ...

Tampermonkey script automating login encountered a POST 404 error

REVISION (click here *) I developed a basic auto login script using Tampermonkey for // ==UserScript== // @name 7Mind User Login Website // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! / ...

"Instantly update and submit live changes on your Ajax form using

Hey all, I'm looking for some help on updating a live edit feature using Ajax or jQuery. Here's a sample of my work. Any assistance would be greatly appreciated! This is the live edit without an Ajax form. var EditableTable = function () { ret ...

Response from the Dojo XHRget request

When using Dojo, I send a xhrget request to my servlet and receive a response in either a json object or json array format. However, when trying to print the response, it shows as Object[] object. How can I retrieve the json objects exactly as they were s ...

Tips for transferring data from a JavaScript page to a C# page by utilizing Jquery

I am working with a dynamically created table that contains values in its selected rows. I need to extract all td.innerText values from each selected row and send them to a C# page, but I am unsure of the best approach. I attempted to use JSON, but I am ...

Steps to access a JSON file in Angular.JS locally without utilizing a server

Below is the code for my controller: angular.module('navApp', []).controller('blogCtrl', function($scope, $http) { $http.get("../json/blogs.json").success(function(response) {$scope.blogs = response.blogs;}); }); I am trying to fi ...

Combining Array Elements to Create Overlapping Images in JavaScript

My goal is to create a planner where users can choose a wallpaper based on the season. Right now, I'm focusing on fall, and when you click on fall, you can see all the different wallpapers (each URL from my array is displayed). However, once the alert ...

Start the ng-app once the document has finished loading

I'm currently working on a project involving AngularJS. One of the specified requirements is to retrieve the HTML content that is "ng enabled" from the server upon a click event, and then inject it into a <div ng-app> using JavaScript. The iss ...

The currentViewData property of the model is not defined, resulting in a TypeError when implementing the Hierarchical Grid and accessing the Child Grid

I'm currently working on implementing a Hierarchy Grid in ASP.Net MVC using Syncfusion Grid Control. During the process of fetching data from the server side with an ajax call for the expansion of the child grid, I encountered a JavaScript error (Type ...

What is the process of transforming a basic JavaScript function into a TypeScript function?

As a Java developer diving into TypeScript for frontend development, I've encountered a simple JavaScript code snippet that I'd like to convert to TypeScript. The original JavaScript code is: let numbers = [123, 234, 345, 456, 567]; let names = ...

Retrieve the text that has been chosen and have it displayed with lines

I'm attempting to extract the selected text and format it with line breaks for a VSCODE Extension. const document = editor.document; const selection = editor.selection; const position = editor.selection.end; const word = document.getTe ...

Is there a different option to getServerSide in the upcoming 13th edition

I am facing a situation with a component that utilizes "use client" and I need to retrieve data from the server before rendering this page, redirecting based on certain conditions. In older versions of Next.js, I would simply use getServerSideProps, but ho ...

What is the best way to retrieve a JSON-formatted array through an AJAX call?

I am currently developing a system with two interconnected drop-down lists. The options in the second list (referred to as the 'sensor_list') are determined based on the selection made in the first list (known as the 'node_list'). To ac ...

Access the most recent state value with React's Context API

Trying out the React context API, Take a look at the someComponent function where I pass the click event (updateName function) to update the value of state.name from the GlobalProvider function. After updating state.name, it reflects in the browser but t ...

The directive code takes precedence over the controller code and is executed first

A custom directive has been implemented and is utilized as shown below: <div car-form car="car" on-submit="createCar(car)"></div> This directive is used on both the new and edit pages, each with its own controller. The EditCarController retri ...

Unlocking the TypeScript UMD global type definition: A step-by-step guide

I have incorporated three@^0.103.0 into my project, along with its own type definitions. Within my project's src/global.d.ts, I have the following: import * as _THREE from 'three' declare global { const THREE: typeof _THREE } Additio ...

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Trying to integrate Typescript into my react project and encountering a particular error: Type 'string' is not assignable to type 'Color | undefined'. The issue arises when I have the following setup... const foo = {stuff:"succes ...