How to get CUSTOM REST API Response in JSON FORMAT in MAGENTO2

Question

Hello I have created one custom API Extension i got response in JSON but with some "Backslash"

Below is my code:

<?php
namespace Vendor\NameSpace\Model;
use Vendor\NameSpace\Api\ColorInterface;
 
class Color implements ColorInterface
{
    /**
     * Returns greeting message to user
     *
     * @api
     * @param string $name Users name.
     * @return string Greeting message with users name.
     */
    public function name() {
        
        $response=[
            "name"=>"Jose",
            "lname"=>"Sell"
        ];
        return json_encode($response);
        
       
        
    }
}

webapi.xml

<?xml version="1.0"?>
<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Webapi:etc/webapi.xsd">
    <route url="/V1/custom/color/" method="GET">
        <service class="Vendor\Namespace\Api\ColorInterface" method="name"/>
        <resources>
            <resource ref="anonymous"/>
        </resources>
    </route>
</routes>

Getting Output is:

"{\"name\":\"Jose\",\"lname\":\"Sell\"}"

Expected Output is

{
    "name":"Jose",
    "lname":"Sell"
}

Can anybody help me please?

Answer 1

You have to use a data interface in order to return the value:

In your interface Vendor\Namespace\Api\ColorInterface change the return value of the function name to Vendor\Namespace\Api\Data\ColorInterface and add the data interface in the file Vendor/Namespace/Api/Data/ColorInterface.php:

<?php

namespace Vendor\Namespace\Api\Data;

interface ColorInterface
{

    const NAME = 'name';
    const LNAME = 'lname';

    /**
     * Get name
     * @return string|null
     */
    public function getName();

    /**
     * Set name
     * @param string $name
     * @return \Vendor\Namespace\Api\Data\ColorInterface
     */
    public function setName($name);

    /**
     * Get lname
     * @return string|null
     */
    public function getLname();

    /**
     * Set lname
     * @param string $lname
     * @return \Vendor\Namespace\Api\Data\ColorInterface
     */
    public function setLname($lname);
}

Then add a Data Model for the recently added interface Vendor/Namespace/Model/Data/Color.php:

<?php

namespace Vendor\Namespace\Model\Data;

use Magento\Framework\Model\AbstractExtensibleModel;
use Vendor\Namespace\Api\Data\ColorInterface;

class Color extends AbstractExtensibleModel implements ColorInterface
{

    /**
     * Get name
     * @return string|null
     */
    public function getName()
    {
        return $this->getData(self::NAME);
    }

    /**
     * Set name
     * @param string $name
     * @return \Vendor\Namespace\Api\Data\ColorInterface
     */
    public function setName($name)
    {
        return $this->setData(self::NAME, $name);
    }

    /**
     * Get lname
     * @return string|null
     */
    public function getLname()
    {
        return $this->_get(self::LNAME);
    }

    /**
     * Set lname
     * @param string $lname
     * @return \Vendor\Namespace\Api\Data\ColorInterface
     */
    public function setLname($lname)
    {
        return $this->setData(self::LNAME, $lname);
    }
}

Then add the preference for the recently added interface Vendor/Namespace/etc/di.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="\Vendor\Namespace\Api\Data\ColorInterface" type="Vendor\Namespace\Model\Data\Color" />
</config>

Finally inject the Data Interface and return it in your file:

<?php
namespace Vendor\NameSpace\Model;
use Vendor\NameSpace\Api\ColorInterface;
use Vendor\Namespace\Api\Data\ColorInterface as DataColorInterface;
 
class Color implements ColorInterface
{
    /**
     * @var DataColorInterface
     */
    private $dataColor;

    /**
     * Constructor.
     * @param HelperStock $helperStock
     */
    public function __construct(
        DataColorInterface $dataColor
    ) {
        $this->dataColor = $dataColor;
    }

    /**
     * Returns greeting message to user
     *
     * @api
     * @param string $name Users name.
     * @return \Vendor\Namespace\Api\Data\ColorInterface
     */
    public function name() {
        
        $dataColor = clone $this->dataColor;

        $dataColor->setName("Jose");
        $dataColor->setLname("Sell");

        return $dataColor;
    }
}

Answer 2

the following code will return JSON as output.

I think the problem is from the receiver side Use something like JSON.parse(YOUR_RESPONSE);

You can create a regular controller action that will return JSON string and set header to text/JSON or application/JSON and it will be decided on the browser side. If you want to use rest API then I did not find anything that could bypass that post-processing.

Thanks