What’s the use of JSON? – JavaScript – SitePoint Forums

Cindy F. Cape

When the below form is submitted for an authenticated user the submission is stored as json.

https://ng-druid.github.io/native_forms_rebuild_v1/89087abb-326d-4a93-888e-9c597ba81b8e

The json file can be seen here.

https://d12b7acm1cy55s.cloudfront.net/89087abb-326d-4a93-888e-9c597ba81b8e.json

preview:

{
  "text": "cdsdfsfdsfsd",
  "select": "1",
  "textarea": "dsfs as c as d sa das d as d asd as d asd as d asds.nndsfs as c as d sa das d as d asd as d asd as d asds.nndsfs as c as d sa das d as d asd as d asd as d asds.",
  "radiogroup": "2",
  "slider": "72",
  "toggle": "83",
  "checkbox": "true",
  "datepicker": "2022-03-23T04:00:00.000Z",
  "autocomplete": "3198",
  "nested": {
    "nestedValue": "nested"
  },
  "terms": [
    {
      "humanName": "one",
      "terms": [
        {
          "humanName": "a"
        }
      ]
    },
    {
      "humanName": "two",
      "terms": [
        {
          "humanName": "b"
        }
      ]
    }
  ],
  "id": "89087abb-326d-4a93-888e-9c597ba81b8e"
}

In a traditional database this would require multiple tables to store properly. However, in JSON the relational information like nested and terms can be stored as part of the single document. This eliminates the need tables.

This is another more traditional example of an ad with attributes stored as json.

{
  "attributes": [
    {
      "attributes": [],
      "computedValue": "30000",
      "displayName": "Asking Price",
      "intValue": 0,
      "name": "price",
      "type": 0,
      "value": "300,00.00"
    },
    {
      "attributes": [],
      "computedValue": "1",
      "displayName": "Beds",
      "intValue": 0,
      "name": "beds",
      "type": 0,
      "value": "1"
    },
    {
      "attributes": [],
      "computedValue": "2",
      "displayName": "Baths",
      "intValue": 0,
      "name": "baths",
      "type": 0,
      "value": "2"
    },
    {
      "attributes": [],
      "computedValue": "2345",
      "displayName": "Sqft",
      "intValue": 0,
      "name": "sqft",
      "type": 0,
      "value": "2345"
    }
  ],
  "cityDisplay": "Seattle, Washington (98060)",
  "description": "ewrewr ew r ew r ew",
  "featureSets": [],
  "id": "012829c6-a75d-11ea-b84a-064be6bfebb4",
  "images": [
    {
      "id": "40acff11-dc45-46c6-98c3-5608649d10cd",
      "path": "media/40acff11-dc45-46c6-98c3-5608649d10cd.png",
      "weight": 1
    }
  ],
  "location": [
    -121.8034,
    47.4323
  ],
  "profileId": "96677e25-c642-43e2-bd26-1e7305784a80",
  "status": 0,
  "title": "New realestate with photo",
  "typeId": "5665f5f8-5533-4aa1-96f4-b78e02714de0",
  "userId": "e36b42fe-b09c-4514-a519-e178bb52957e"
}

I would argue that creating the tables and MVC app to persist data is much more complicated than storing data in natural form as json. Especially if you are building a modern front-end using a mvvm framework like React, Angular, Vue, etc.

The demonstration above actually takes this concept further by completely eliminating servers and databases from the tech stack. This is two entire tiers eliminated. The entire app merely runs as a browser native program without a server or database.

In my case json has become a fast, cheap, simple means to store persistent data. Furthermore, there are a large array of storages that use json as highly available, scalable alternatives to a traditional database.

The demonstration above uses a CDN (https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) that can reliably handle an estimated 3500 concurrent, parallel requests. However, there are other more traditional NoSQL options like MongoDB: https://www.mongodb.com/. The demonstration above uses aws s3 and cloudfront but cloudflare does a better job explaining a CDN than aws docs do.

For experimentation purposes you can setup a free Mongo database in the cloud for free: https://www.mongodb.com/atlas/database

If you wanted to try the CDN approach with php I would recommend using Flysystem (https://flysystem.thephpleague.com/docs/) with the s3 adaptor (https://flysystem.thephpleague.com/docs/adapter/aws-s3-v3/).

As seen in flysystem you could also use Azure BLOB or Google Cloud Storage as well.

The CDN approach is limited in search capabilities. The MongoDB approach is not. MongoDB offers many of the same features in terms of filtering, aggregating, searching data that traditional relational databases do. In fact MongoDB offers more features.

In my professional opinion the best search solution is one dedicated to the purpose. All of which use JSON for storage and queries. Many of these search solutions are also compatible with SQL queries like open search.

This is an example of a query in open search that uses json for the request body payload.

POST https://search-domain.us-east-1.es.amazonaws.com/classified_panelpages/_search/template

{
  "id": "panelpagelistitems",
  "params": {
    "site": [
      {
        "term": {
          "site.keyword": {
            "value": "ipe"
          }
        }
      }
    ],
    "path": [
      {
        "wildcard": {
          "path.keyword": {
            "value": "*"
          }
        }
      }
    ]
  }
}

All this said basically any api that you use in this day and age will use json. In older projects you will find SOAP or proprietary methods but modern REST APIs are using JSON. However, its not just for data transfer. JSON can be used everywhere including storage.

https://www.sitepoint.com/community/t/whats-the-use-of-json/384566/

Next Post

Coding vs programming: What is the difference?

In the 21st century, “learn to code” has become a mantra of sorts for a certain kind of person. And yes, for many people, coding is a great first or even second career choice after attending universities, coding bootcamps, or one of the best online coding courses. But the related […]