Json | Coding 4 Developers

Pretty JSON example

So many time we required ti print the JSON in pretty format because it is easy to read and understood. As we know JSON (JavaScript object notation) is a lightweight data-interchange format. It is easy for humans to read and write.
In this article you will learn how to print JSON in pretty format at browser.

Here is the CSS code create a new css file named as stylesheet.css.
stylesheet.css

pre {
    background-color: #f8f8ff;
    border: 1px solid #C0C0C0;
    padding: 10px 20px;
    margin: 20px;
}
.json-key {
    color: #A52A2A;
}
.json-value {
    color: #000080;
}
.json-string {
    color: #556b2f;
}

pre {

background-color: #f8f8ff;

border: 1px solid #C0C0C0;

padding: 10px 20px;

margin: 20px;

}

.json-key {

color: #A52A2A;

}

.json-value {

color: #000080;

}

.json-string {

color: #556b2f;

}

I have used CSS for highlighting the key, value and strings.
Here is the JavaScript and HTML code to print the JSON in pretty format.

index.html

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script>
    $(function () {
            var library = {};

        library.json = {
            replacer: function(match, pIndent, pKey, pVal, pEnd) {
                var key = '<span class=json-key>';
                var val = '<span class=json-value>';
                var str = '<span class=json-string>';
                var r = pIndent || '';
                if (pKey)
                    r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
                if (pVal)
                    r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
                return r + (pEnd || '');
            },
            prettyPrint: function(obj) {
                var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
                return JSON.stringify(obj, null, 3)
                    .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
                    .replace(/</g, '&lt;').replace(/>/g, '&gt;')
                    .replace(jsonLine, library.json.replacer);
            }
        };

        var products = { status: true, statusCode:200, message:"Products Listing", data: {  products: [{ name: "Mobile", brand: "Samsung" }, { name: "Laptop", brand: "Dell" }, { name: "Sports Shoes", brand: "Campus" }], categories: ["Electronics","Footwear"] } };
        $('#products').html(library.json.prettyPrint(products));

    });
    </script>

<pre><code id=products></code></pre>

$(function () {

var library = {};

library.json = {

replacer: function(match, pIndent, pKey, pVal, pEnd) {

var key = '<span class=json-key>';

var val = '<span class=json-value>';

var str = '<span class=json-string>';

var r = pIndent || '';

if (pKey)

r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';

if (pVal)

r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';

return r + (pEnd || '');

prettyPrint: function(obj) {

var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;

return JSON.stringify(obj, null, 3)

.replace(/&/g, '&').replace(/\\"/g, '"')

.replace(/</g, '<').replace(/>/g, '>')

.replace(jsonLine, library.json.replacer);

}

};

var products = { status: true, statusCode:200, message:"Products Listing", data: { products: [{ name: "Mobile", brand: "Samsung" }, { name: "Laptop", brand: "Dell" }, { name: "Sports Shoes", brand: "Campus" }], categories: ["Electronics","Footwear"] } };

$('#products').html(library.json.prettyPrint(products));

});

</script>

Here in JavaScript I have cerated a function to make the JSON in pretty format. Here we have a products JSON and we are printing products JSON in pretty format. ... Read More

So many time we need to return in REST APIs the request body. For example if you send a POST request with some parameters and you wanted you API access token along with the request body parameters which you sent.

Like below example:

Here is the Request body:

{
        "name":"Coding 4 Developers",
        "email":"info@www.coding4developers.com",
        "password" : "654321123",
        "role" : 2,
        "deviceId" : "TestDeviceId",
        "deviceType" : 1
}

{

"name":"Coding 4 Developers",

"email":"info@www.coding4developers.com",

"password" : "654321123",

"role" : 2,

"deviceId" : "TestDeviceId",

"deviceType" : 1

}

And now you wanted to get register and access token in response along with above request body like below:

{
    "status": 1,
    "message": "You have been registered successfully.",
    "errors": [],
    "data": {
        "name": "Coding 4 Developers",
        "email": "info@www.coding4developers.com",
        "password": "654321123",
        "role": 2,
        "deviceId": "TestDeviceId",
        "deviceType": 1,
        "accessToken": "81962729efe37e293bda6571eb64bfa0"  // access token a new added key in request body
    }
}

{

"status": 1,

"message": "You have been registered successfully.",

"errors": [],

"data": {

"name": "Coding 4 Developers",

"email": "info@www.coding4developers.com",

"password": "654321123",

"role": 2,

"deviceId": "TestDeviceId",

"deviceType": 1,

"accessToken": "81962729efe37e293bda6571eb64bfa0" // access token a new added key in request body

}

How can we do this in Laravel????

Here is the answer of this question. You can get the HTTP request body in Laravel by following code:

$request->all()

1	$request->all()

Now if you wanted to send the request body with along with access token in JSON response in Laravel, You can do it like following example:

array_merge($request->all(), ['accessToken' => $accessToken])

1	array_merge($request->all(), ['accessToken' => $accessToken])

So finally function to return the JSON response after registration of the user looks like:

public static function registerUser($request) {
        UserServiceProvider::$data['message'] = trans('messages.server_error');
        try {
                $userId = User::create($request);
                $accessToken = md5(uniqid(mt_rand(), true));
                $isAccessTokenCreated = AccessToken::create($request, $accessToken, $userId);
                if ($userId && $isAccessTokenCreated) {
                    UserServiceProvider::$data['status'] = 1;
                    UserServiceProvider::$data['data'] = array_merge($request->all(), ['accessToken' => $accessToken]); // here merging the access token in request body
                    UserServiceProvider::$data['message'] = trans('messages.user_registered');
                    }
        } catch (\Exception $e) {
            Log::error( __CLASS__ ."::" . __METHOD__ . "  " . $e->getMessage());
        }
        return UserServiceProvider::$data;
    }

public static function registerUser($request) {

UserServiceProvider::$data['message'] = trans('messages.server_error');

try {

$userId = User::create($request);

$accessToken = md5(uniqid(mt_rand(), true));

$isAccessTokenCreated = AccessToken::create($request, $accessToken, $userId);

if ($userId && $isAccessTokenCreated) {

UserServiceProvider::$data['status'] = 1;

UserServiceProvider::$data['data'] = array_merge($request->all(), ['accessToken' => $accessToken]); // here merging the access token in request body

UserServiceProvider::$data['message'] = trans('messages.user_registered');

}

} catch (\Exception $e) {

Log::error( __CLASS__ ."::" . __METHOD__ . " " . $e->getMessage());

}

return UserServiceProvider::$data;

}

Coding 4 Developers

Running Code Website

Tag: json

How to pretty JSON fromat using JavaScript/jQuery?

How do I get HTTP Request body content in Laravel | How to return JSON Request body in Response in Laravel | How to add new parameter in HTTP request body in Laravel

Share This:

Share This: