Get a JSON data structure from a JSON object

In this article, we will show you how to get a JSON data structure from a JSON object. This is very small article where we will use the different type of the JSON object to get the all possible JSON data structure using JavaScript.

For the demo purpose, we will use the following JSON objects to get the JSON data structure.

JSON object 1

var jsonObj1 = {
  page: 1,
  per_page: 6,
  total: 12,
  total_pages: 2,
  data: [
    {
      id: 1,
      email: "[email protected]",
      first_name: "George",
      last_name: "Bluth",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
    },
    {
      id: 2,
      email: "[email protected]",
      first_name: "Janet",
      last_name: "Weaver",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
    },
    {
      id: 3,
      email: "[email protected]",
      first_name: "Emma",
      last_name: "Wong",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
    },
    {
      id: 4,
      email: "[email protected]",
      first_name: "Eve",
      last_name: "Holt",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
    },
    {
      id: 5,
      email: "[email protected]",
      first_name: "Charles",
      last_name: "Morris",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
    },
    {
      id: 6,
      email: "[email protected]",
      first_name: "Tracey",
      last_name: "Ramos",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
    }
  ],
  ad: {
    company: "StatusCode Weekly",
    url: "statuscode",
    text:
      "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
  }
};

JSON object 2

var jsonObj2 = [
  {
    userId: 1,
    id: 1,
    title: "delectus aut autem",
    completed: false,
    tags: [
      "a", "b"
    ]
  },
  {
    userId: 1,
    id: 2,
    title: "quis ut nam facilis et officia qui",
    completed: false
  },
  {
    userId: 1,
    id: 3,
    title: "fugiat veniam minus",
    completed: false
  }
];

Function to get a JSON data structure

Let’s write a function to get a JSON data structure based on the JSON object. In this function, we will pass two parameters, the `obj` that used to pass the JSON object and `str` that used to pass the prefix for the data structure.

To read the nested structure, we will write a recursive function and if the type of the attribute’s value does not match the `object` then we will push the structure into the list.

var structureList = [];

// get JSON data structure
function getStructure(obj, str) {
  if (typeof obj === "object" && !Array.isArray(obj)) {
    Object.keys(obj).map(x => {
      if (typeof obj[x] === "object") {
        getStructure(obj[x], `${str}.${x}`);
      } else {
        writeStructure(str, x);
      }
    });
  } else if (Array.isArray(obj)) {
    writeStructure(str);
    getStructure(obj[0], `${str}${str === "JSON" ? "." : ""}[i]`);
  }
}

// push the structure into the list
function writeStructure(str, x) {
  var newData = x ? `${str}.${x}` : `${str}${str === "JSON" ? "." : ""}[i]`;
  structureList.push(newData);
}

Output

Finally, we will call the function to get the JSON data structure list.

Output: JSON object 1

// Get JSON data structure by passing prefix as "JSON"
getStructure(jsonObj1, "JSON");
console.log(structureList);

// Output:
[
  "JSON.page",
  "JSON.per_page",
  "JSON.total",
  "JSON.total_pages",
  "JSON.data[i]",
  "JSON.data[i].id",
  "JSON.data[i].email",
  "JSON.data[i].first_name",
  "JSON.data[i].last_name",
  "JSON.data[i].avatar",
  "JSON.ad.company",
  "JSON.ad.url",
  "JSON.ad.text"
]

Output: JSON object 2

// Get JSON data structure by passing prefix as "JSON"
getStructure(jsonObj2, "JSON");
console.log(structureList);

// Output:
[
  "JSON.[i]",
  "JSON.[i].userId",
  "JSON.[i].id",
  "JSON.[i].title",
  "JSON.[i].completed",
  "JSON.[i].tags[i]"
]

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

StackBlitz Project