Unexpected issue with Typo3 v9 - receiving empty Ajax Plugin JSON response

Consider the following setup in TYPO3 for an ajax request:

ajaxAutocomplte_page = PAGE
ajaxAutocomplte_page {
    typeNum = 111871
    10 = COA_INT
    10 {
        userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
        extensionName= MyExt
        pluginName = AjaxAutocomplete
        vendorName = TYPO3
    }

    config {
        disableAllHeaderCode = 1
        additionalHeaders.10.header = Content-type:application/json
        xhtml_cleaning = 0
        debug = 0
        no_cache = 1
        admPanel = 0
    }
}

When the Controller returns the response:

 public function autocompleteJsonAction()
    {
        $query = $_GET['query'];

        $data = $this->templatesRepository->getAutocompleteData($query);

        $this->view->setVariablesToRender(['data']);
        $this->view->assign('data', $data);
    }

JSON data is produced when accessing the URL directly, but not when requested asynchronously through JavaScript.

What could be causing this issue?

https://i.stack.imgur.com/l1yVk.png

jsonajaxpluginstypo3response

Answer №1

Feel free to give this code a try. It's been effective for me.

<?php

public function autoCompleteJsonAction() {
    $query = \TYPO3\CMS\Core\Utility\GeneralUtility::_GET('query');
    $data = $this->templatesRepository->getAutoCompleteData($query);

    $this->response->setHeader('Content-Type', 'application/json', true);
    $this->response->sendHeaders();

    $theView = $this->objectManager->get("TYPO3\\CMS\\Extbase\\Mvc\\View\\JsonView");
    $theView->setControllerContext($this->controllerContext);
    $theView->assignMultiple([
        'items' => $data
    ]);
    $theView->setVariablesToRender(['items']);

    return $theView->render();
}

Hopefully, this solution will work well for you too!

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

Efficient method for deleting a specific item from a JSON object in React.js

Within the REACT JS framework, I am managing a JSON object in the state component "myrecords". The items within this object are organized by their respective Company Names and have the following structure: { "Master Automotives": [ { ...

javascriptjsonreactjsstate

React is unable to access the value of a JSON local file within a component

I'm currently working on extracting a value from a local json file. Despite no errors, the value is not displaying when viewed in the browser. Initially, I am utilizing a local json file, but I plan to switch to an endpoint in the future. Within Hea ...

jsonreactjs

The command `node server.js` has been initiated. Nodemon has executed a clean exit and is now waiting for any

A React application has been developed where users can input their email and a message to send to the server. However, upon trying to send the message, Error number 2 is encountered along with viewing Error number 1 in the terminal. Despite ensuring that ...

node.jsjsonreactjsexpress

Utilizing React to dynamically load JSON data and render a component

I am currently facing a challenge in rendering a React component that includes data fetched from a JSON using the fetch() method. Although the API call is successful, I am experiencing difficulties in displaying the retrieved data. Below is the code snip ...

javascriptjsonajaxreactjsecmascript-6

Filtering JSON data by date range in React JS

I have a dataset with JSON data containing ISO dates, and my goal is to filter out entries based on the "date_created" field falling within a specific date range. The time component should be ignored in this comparison, and the original JSON data should re ...

javascriptjsonreactjs

Switching XML to JSON using React.js

Currently, I am in the process of developing an application with a requirement to retrieve data from a web API that provides XML responses. However, my objective is to obtain this information in JSON format, but unfortunately, the API does not offer suppor ...

jsonxmlreactjsnpm

tips for patiently awaiting an ajax response before setting the object

I am currently working on a basic todo app using React. Initially, everything was running smoothly when I stored my data in a pre-defined object. However, now that I am retrieving my data from a link (rest) using AJAX, I seem to be encountering some issues ...

javascriptjqueryajaxreactjs

I'm in the process of constructing a create-next-app and I need to retrieve data from a web API. However, I'm unsure of the best place to securely store the API key

I am working on building a create-next-app that will retrieve data from the News Catcher API and display it within my application. I have obtained an API key to access the News Catcher API. However, I am unsure of where to securely store the API key and h ...

javascriptreactjsjsonapinext.js

I'm sorry, but your request to access the API from the React localhost has been hinder

Currently, I am delving into the world of React, a JavaScript framework. My task involves fetching a token from an API provided by this service: . To achieve this, I must include my X_CONSUMER_KEY in the request. Here is the approach I am taking using the ...

ajaxreactjsapiaxios

What is the best way to add additional buttons to my React App after the initial button has been clicked?

Currently, I am in the process of developing a CSV file loader that converts data into JSON format. The loader will consist of three buttons: 1. The first button allows me to select a file from my computer and load the CSV data for conversion to JSON. 2. ...

javascriptjsonreactjsapi

reactjs error: Attempting to utilize the toLowerCase method on an undefined property during double mapping

My issue involves a JSON structure that requires mapping a function twice in a loop to access objects within an array. Once mapped, I need a textbox for searching the data list. However, I am encountering the following error: TypeError: Cannot read proper ...

javascriptjsonreactjsecmascript-6

Issue with optimizing in Webpack 4

It's past 2am and I find myself going crazy trying to identify an error. The console keeps repeating the message: "Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead." I've attempted modifyi ...

javascriptjsonreactjswebpack

Can JSON be used to perform mathematical operations and calculations?

Utilizing the amazing json-server as my application's backend has been incredibly beneficial for custom data retrieval. However, it would be even more valuable if it supported calculations and expressions to mimic backend behavior. Consider this data ...

javascriptjsonreactjsjson-server

Tips for preserving axois GET response as a JSON object or in its original form upon arrival

export class LoadProfile extends Component { state = { data: '' } componentDidMount() { axios({ url: 'http://localhost:8080/profile/all', method: 'GET', responseType: 'json', ...

jsonreactjsaxios

React and Redux encounter an issue where selecting a Select option only works on the second attempt, not the first

I am currently working on a React/Redux CRUD form that can be found here. ISSUE RESOLVED: I have encountered an issue where the state should be updated by Redux after making an API call instead of using this.setState. The concept is simple: when a user s ...

javascriptajaxreactjsredux

Updating ES6 syntax for superset in array: a step-by-step guide

I am currently working with ES6 React code that generates an array of MiniIcons on a webpage. const MiniIcons = ({miniicons}) => ( <div id="application"> {miniicons.map(miniicon => ( <MiniIcon key={miniicon.id} id={miniicon.id} ...

javascriptjsonreactjsecmascript-6

Utilizing Filter in ReactJS to Avoid Displaying Duplicate Entries in an Array

I am facing an issue on my ReactJS page where two dropdown lists are showing duplicate values. These values are retrieved from a json file. I have tried using the filter method to eliminate duplicates, but I am unsure about how to apply it in my array whil ...

jsonreactjsfilterfetch

Access the contents of objects during the creation process

I am currently in the process of creating a large object that includes API path variables. The challenge I am facing is the need to frequently modify these API paths for application migration purposes. To address this, I had the idea of consolidating base ...

javascriptjsonreactjsobject

What is causing the difficulty in accessing the 'query' feature within the API, and why is the question bank failing to display?

Just wanted to mention that I am still learning about class based components, setState, and other concepts in async JS like axios. Below is a very basic example of what I can currently do. This is App.js: import Questions from './components/Ques ...

reactjsjsonasync-await

Accessing a specific data point from a Rest Api with React JS

How can I extract the value '00000000000000000000000000000000' that comes after clusters in the links->href in a Rest Api response? [{ "analysisUnits": [ { "links": [ { "href": "http://127.0. ...

reactjsjsonrest