如何导航未知深度的嵌套对象？

Question

Im making a notetaking app and Ive decided to store all the notes and structure in JSON file. On javascript, I get the JSON with AJAX, parse it and output it on the website.

My note structure is array of objects that can be nested, like this (if it is a note, it has a "content" attribute, if it is a folder, it has an array of objects (can be empty array too if the folder should me empty):

data {
  entries = [
    {
     name: "Some note",
     content: "This is a test note"
    },
    {
     name: "folder",
     children: [
       {
         name: "Bread recpie",
         content: "Mix flour with water..."
       },
       {
         name: "Soups",
         children: [
          {
            name: "Pork soup",
            content: "Add meat, onion..."
          },
          {
            name: "Chicken soup"
            content: "....."
          }
         ] 
       }
     ]
    }
  ]
}

To list the root directory, its simple, i just loop through the array as it only outputs the top-level records:

for (entry of data.entries) {
    const li = document.createElement("li");
    li.textContent = entry.name;
    if (entry.children) {
        li.className = "folder";
    } else {
        li.className = "file";
    }
    loop.appendChild(li); 
} 

But what about the folders? How should I proceed in listing the folders if the depth of nesting is unknown? And how do I target the specific folder? Should I add unique IDs to every object so i can filter the array with them? Or should I store some kind of depth information in a variable all the time?

Answer 1

You're making this more difficult for yourself by saving data to a JSON file. That is not a good approach. What you need to do is design a database schema appropriate for your data and create an API that outputs a predictable pattern of data that your client can work with.

I would suggest having a Folder resource and a Note resource linked through a one-to-many relationship. Each Folder resource can have many associated Note entries, but each Note has only one Folder that it is linked to. I suggest using an ORM, because most make it easy to eager load related data. For instance, if you choose Laravel you can use Eloquent, and then getting all notes for a folder is as easy as:

$folderWithNotes = Folder::with('notes')->where('name', 'school-notes')->get();

Knowing PHP is beside the point. You should still be able to see the logic of that.

If you create a database and build a server-side API to handle your data, you will end up with JSON on your client side that has a predictable format and is easy to work with.