👨‍💻 Get all attribute paths in the given object with text search

#JSON Object Paths.md

👩‍💻 JSON Object Paths

I had a problem with looking at an object and seeing all of its possible object paths.

Instead of looking through massive JSON objects, I created this tool to see it all easily.

📋 Paste your JSON data into the textarea

This will also display errors if your JSON is not properly formatted.

On the right column, it will display the possible attributes as well as a search filter tool.

🧪 Example input

{
  "field1": "value",
  "obj1": {
    "field1": 123,
    "subObj1": { "field1": "info" }
  }
}

🧪 Expected output

field1
obj1.field1
obj1.subObj1.field1

*This example is ran automatically on start.

bookmarklet.html

data:text/html,<textarea id=input style=width:100%25 rows=10></textarea><div id=err style="color:red"></div><input type=text id=search placeholder=Search.../><button onclick=clearSearch()>Clear</button><div id=o></div><script>example={"field1":"value","obj1":{"field1":123,"subObj1":{"field1":"info"}}};searchStr="";inputVal=null;attributes=[];isObject=obj=>typeof obj==="object";getPaths=(obj,parent="",cols=[])=>{if(!obj||!isObject(obj))return;parent=parent?parent+".":"";Object.keys(obj).map(key=>{if(isObject(obj[key]))getPaths(obj[key],parent+key,cols);else cols.push(parent+key);});return cols};clearSearch=()=>{search.value="";searchStr="";render();};render=()=>{if(!inputVal)return o.innerHTML=err.innerHTML="";try{attributes=getPaths(JSON.parse(inputVal)).sort();o.innerHTML=attributes.filter(a=>!searchStr||a.includes(searchStr)).join("<br>");err.innerHTML="";}catch(e){err.innerHTML=e.message;}};search.oninput=e=>{searchStr=e.target.value;render();};input.oninput=e=>{inputVal=e.target.value;render();};onload=()=>{input.value=inputVal=JSON.stringify(example,null,2);render();};</script>

getObjectPaths.html

<style>.col { width: 48%; padding: .5rem; vertical-align: top;}</style>

<h2>Copy-paste JSON into this textarea to get all attribute paths</h2>

<table><tr>
<td class=col>
  <textarea id=input style=width:100% rows=10></textarea>
  <div id=err style="color:red"></div>
</td>
<td class=col>
  <input type=text id=search placeholder=Search... />
  <button onclick=clearSearch()>Clear</button>
  <div id=o></div>
</td>
</tr></table>

<script>
const example = 
{
  "field1": "value",
  "obj1": {
    "field1": 123,
    "subObj1": { "field1": "info" }
  }
}
//Expected Output:
//
// field1
// obj1.field1
// obj1.subObj1.field1

let searchStr = "";
let inputVal = null;
let attributes = [];

const isObject = obj => typeof obj === "object";

const getPaths = (obj, parent = "", cols = []) => {
  if (!obj || !isObject(obj)) return;
  parent = parent ? parent + "." : "";
  Object.keys(obj).map(key => {
    if (isObject(obj[key])) getPaths(obj[key], parent + key, cols);
    else cols.push(parent + key);
  });
  return cols;
};
const clearSearch = () => { search.value = ""; searchStr = ""; render(); };
const render = () => {
  if (!inputVal) return o.innerHTML = err.innerHTML = "";
  try {
    attributes = getPaths(JSON.parse(inputVal)).sort();
    o.innerHTML = attributes.filter(a => !searchStr || a.includes(searchStr)).join("<br>");
    err.innerHTML = "";
  } catch(e) {
    err.innerHTML = e.message;
  }
};
search.oninput = e => { searchStr = e.target.value; render(); };
input.oninput = e => { inputVal = e.target.value; render(); };

onload = () => {
  input.value = inputVal = JSON.stringify(example, null, 2);
  render();
};
</script>