JavaScript - How To Make your JSON look Pretty

erikrod1 · May 16, 2023, 7:32pm

In JavaScript when I run the API command for listFiles these are the response results

{
  results: {
    entries: [ [Object], [Object], [Object], [Object], [Object] ],
    totalEntries: 10
  },
  name: 'camera.listFiles',
  state: 'done'
}

Here is the code that produces the results response above

const data =  await response.json();

console.log(data);

Since I wanted all the [Object]s to show their data, I used Stringify to show the full output of the JSON and turn it into a String like this.

const data =  await response.json();

const prettyData = JSON.stringify(data,null,4)

console.log(prettyData);

To use JSON.stringify the First Parameter is the JSON, Second Parameter can be a Function that you want to use to modify the JSON in my case I put null since I didn’t need a Function, Third Parameter is how many Spaces you want your indentation to be.

And the Result Is…

{
    "results": {
        "entries": [
            {
                "dateTime": "2015:07:10 11:05:18",
                "_favorite": false,
                "fileUrl": "https://fake-theta.vercel.app/files/100RICOH/R0010001.JPG",
                "isProcessed": true,
                "name": "R0010001.JPG",
                "previewUrl": "",
                "size": 4051440
            },
            {
                "dateTime": "2015:07:10 11:05:18",
                "_favorite": false,
                "fileUrl": "https://fake-theta.vercel.app/files/100RICOH/R0010002.JPG",
                "isProcessed": true,
                "name": "R0010002.JPG",
                "previewUrl": "",
                "size": 4051440
            },
            {
                "dateTime": "2015:07:10 11:05:18",
                "_favorite": false,
                "fileUrl": "https://fake-theta.vercel.app/files/100RICOH/R0010003.JPG",
                "isProcessed": true,
                "name": "R0010003.JPG",
                "previewUrl": "",
                "size": 4051440
            },
            {
                "dateTime": "2015:07:10 11:05:18",
                "_favorite": false,
                "fileUrl": "https://fake-theta.vercel.app/files/100RICOH/R0010004.JPG",
                "isProcessed": true,
                "name": "R0010004.JPG",
                "previewUrl": "",
                "size": 4051440
            },
            {
                "dateTime": "2015:07:10 11:05:18",
                "_favorite": false,
                "fileUrl": "https://fake-theta.vercel.app/files/100RICOH/R0010005.JPG",
                "isProcessed": true,
                "name": "R0010005.JPG",
                "previewUrl": "",
                "size": 4051440
            }
        ],
        "totalEntries": 10
    },
    "name": "camera.listFiles",
    "state": "done"
}

craig · May 16, 2023, 10:08pm

Suggest you put the entire JavaScript code snippet in your article if the article is short.

github.com

theta360developers/theta-javascript/blob/main/fake-theta/commands/listFiles.js

const body = {'name': 'camera.listFiles',
              "parameters": {
                  "fileType": "all",
                  "entryCount": 5,
                  "maxThumbSize": 0   
    }
}
const response = await fetch('https://fake-theta.vercel.app/osc/commands/execute', 
	{method: 'POST', 
	body: JSON.stringify(body),
	headers: {'Content-Type': 'application/json'}
});
const data =  await response.json();

console.log(JSON.stringify(data,null,4));

The full code snippet will enable other developers to test the command themselves.

By using fake-theta, other developers do not need a camera. Even if people have a camera, they may not want to turn it on and connect their laptop to the camera for the test.

In this example, the body of the request sent to the THETA API endpoint is also put through JSON.stringify