javascript – How do I discover my JSON recordsdata and cargo them with capacitor

Here’s a script I put collectively to load recordsdata by way of the capacitor file system

import { Filesystem, Listing, FilesystemPermissions } from '@capacitor/filesystem';
import path from 'path';

// Utility perform to record listing contents for debugging
const listDirectoryContents = async (listing, dirPath) => {
  attempt {
    console.log(`Itemizing contents of listing: ${listing} at path: ${dirPath}`);
    const contents = await Filesystem.readdir({
      path: dirPath,
      listing: listing
    });
    console.log(`Contents of ${dirPath} in ${listing}:`, JSON.stringify(contents.recordsdata));
  } catch (error) {
    console.error(`Didn't record contents of ${dirPath} in ${listing}:`, error);
  }
};

// Utility perform to record all root-level directories
const listRootDirectories = async () => {
  const directories = [Directory.Documents, Directory.Data, Directory.Application, Directory.External, Directory.ExternalStorage, Directory.Cache];
  for (const listing of directories) {
    console.log(`nListing contents of root listing: ${listing}`);
    await listDirectoryContents(listing, '');
  }
};

// Verify for and request crucial permissions
const checkAndRequestPermissions = async () => {
  attempt {
    const standing = await Filesystem.checkPermissions();

    if (standing.publicStorage !== 'granted') {
      console.log('Public storage permission not granted. Requesting permission...');
      const requestStatus = await Filesystem.requestPermissions({ permissions: [FilesystemPermissions.PublicStorage] });
      
      if (requestStatus.publicStorage !== 'granted') {
        throw new Error('Public storage permission was not granted.');
      } else {
        console.log('Public storage permission granted.');
      }
    } else {
      console.log('Public storage permission already granted.');
    }
  } catch (error) {
    console.error('Error checking/requesting permissions:', error);
    throw error;
  }
};

export const loadJsonFiles = async (dir) => {
  attempt {
    console.log('Checking permissions...');
    await checkAndRequestPermissions();

    console.log(`Making an attempt to learn listing: ${dir}`);

    // Listing all root-level directories
    await listRootDirectories();

    // Listing contents of related directories for debugging
    await listDirectoryContents(Listing.Paperwork, '');
    await listDirectoryContents(Listing.Information, '');
    await listDirectoryContents(Listing.Software, '');
    await listDirectoryContents(Listing.Exterior, '');
    await listDirectoryContents(Listing.ExternalStorage, '');
    await listDirectoryContents(Listing.Cache, '');
    await listDirectoryContents(Listing.Paperwork, dir);
    await listDirectoryContents(Listing.Information, dir);
    await listDirectoryContents(Listing.Software, dir);
    await listDirectoryContents(Listing.Exterior, dir);
    await listDirectoryContents(Listing.ExternalStorage, dir);
    await listDirectoryContents(Listing.Cache, dir);

    // Try to seek out the index.html file in several places
    const indexPath = path.be part of(dir, 'index.html');
    console.log('Checking for index.html in several directories...');

    const directories = [Directory.Documents, Directory.Data, Directory.Application, Directory.External, Directory.ExternalStorage, Directory.Cache];
    for (const listing of directories) {
      attempt {
        console.log(`Checking for index.html in ${listing}`);
        const indexFile = await Filesystem.readFile({
          path: indexPath,
          listing: listing
        });
        console.log(`index.html present in ${listing}: ${indexFile.uri}`);
      } catch (error) {
        console.log(`index.html not present in ${listing}.`);
      }
    }

    // Attempt to learn the goal listing
    let recordsdata;
    for (const listing of directories) {
      attempt {
        console.log(`Making an attempt to learn ${dir} from ${listing}`);
        recordsdata = await Filesystem.readdir({
          path: dir,
          listing: listing
        });
        console.log(`Listing learn efficiently in ${listing}. Discovered recordsdata: ${JSON.stringify(recordsdata.recordsdata)}`);
        if (recordsdata.recordsdata.size > 0) break;
      } catch (error) {
        console.log(`Didn't learn ${dir} from ${listing}: ${error.message}`);
      }
    }

    let information = [];

    if (recordsdata && recordsdata.recordsdata.size > 0) {
      for (const file of recordsdata.recordsdata) {
        if (file.endsWith('.json')) {
          const filePath = path.be part of(dir, file);
          console.log(`Studying file: ${filePath}`);
          const fileContent = await Filesystem.readFile({
            path: filePath,
            listing: Listing.Paperwork // Match the listing utilized in readdir
          });
          console.log(`File learn efficiently: ${filePath}`);
          const jsonData = JSON.parse(fileContent.information);
          console.log(`Parsed JSON information: ${JSON.stringify(jsonData)}`);
          information = information.concat(jsonData);
        } else {
          console.log(`Skipping non-JSON file: ${file}`);
        }
      }
    } else {
      console.log(`No recordsdata present in any listing for ${dir}.`);
    }

    console.log('All JSON recordsdata loaded efficiently.');
    return information;
  } catch (error) {
    console.error('Error loading JSON recordsdata:', error);
    throw error;
  }
};

It is a variety of code, however I am merely simply making an attempt to load a listing known as ‘information’. For context, I am utilizing vue to compile the html/css for my capacitor venture.

Once I construct I can see my vue code simply tremendous and the venture masses up on iOS and Android. What would not work although is looking for my file.

I did many assessments after wanting round (even utilizing chatGPT), and I couldn’t discover a resolution as to how I can entry the recordsdata. I even learn a rumor that capacitor shops recordsdata in indexdDB however utilizing safari I verified this was not the case after utilizing that to view the storage and console messages from my iOS app (it has a developer mode to do that when it is related by way of USB)

My query is what am I doing incorrect and the way can I load one thing so simple as a JSON or TXT file?

My code at present was scanning each listing I may consider with none luck, all of them present up with no recordsdata in it. The iOS venture to be clear once I look I see my ‘information’ folder with the JSON subsequent to the index.html

Right here is my VSCode listing construction for instance as proof.

And right here right here is the iOS listing construction after I ran npx cap sync to confirm it bought copied over and it’s def there.

So I hope I’ve confirmed that it is positively a part of the venture. If it is being compiled onto the precise system once I construct I cannot confirm this but as I am unsure how.

If anybody has any clues how to do that it will be a lot appreciated! You’d suppose this could be fairly easy.

I learn this whole web page: https://capacitorjs.com/docs/apis/filesystem

I’m fairly certain I am implementing what it says appropriately?