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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | var jsonObj1 = { page: 1, per_page: 6, total: 12, total_pages: 2, data: [ { id: 1, first_name: "George", last_name: "Bluth", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" }, { id: 2, first_name: "Janet", last_name: "Weaver", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" }, { id: 3, first_name: "Emma", last_name: "Wong", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" }, { id: 4, first_name: "Eve", last_name: "Holt", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" }, { id: 5, first_name: "Charles", last_name: "Morris", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" }, { id: 6, 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 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
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 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..!!
