How to create a JSON from a thing ? (I tried with code with Toolbox)

Need help Plugins
1

Hello Bubblers,

I am trying to create a JSON from my Article object, so I can edit it from a Rich Text Editor plugin with additional features like a menu showing when highlighting text.

My Article object has the following fields :

  • H1 (text)
  • Intro (text, optional)
  • H2s (H2 section, list)
  • Conclusion (text, optional)

My H2 object (H2 Section) has these fields:

  • H2 (text)
  • Intro (text, optional)
  • Text (text, optional)
  • H3s (H3 Section, list, optional)
  • Conclusion (text, optional)

And my H3 object (H3 Section) has the fields H3(text) and Text(text).

I created a backend workflow with a “Server script” action from the plugin toolbox to try achieving it from JS code. I got helped by ChatGPT4, but I thought I hit his limits when it started to say to “Replace ‘Query’ with the appropriate method to perform queries in Bubble”.

Here is the code I have so far if you want to see what I try to do :

// Field names for Article, H2 Section, and H3 Section objects in Bubble
const FieldNames = {
  Article: "Article",
  Conclusion: "Conclusion",
  H1: "H1",
  Intro: "Intro",
  H2s: "H2s",
  H2: "H2",
  H3s: "H3s",
  H3: "H3",
  Text: "Text",
  Position: "Position"
};

// Retrieve the Article object from the workflow API input parameters
const article = properties.thing1;

// Create an async function to retrieve H2 Section objects
async function getH2Sections(article) {
  const query = new Query('Article'); // Replace 'Query' with the appropriate method to perform queries in Bubble
  query.equalTo('Article', article); // Make sure that the 'Article' field is properly configured in the H2 Section table
  const h2Sections = await query.find();
  return h2Sections;
}

// Use the async function to retrieve H2 Section objects and wait for the data to be available
getH2Sections(article).then(h2Sections => {
  let h3Sections = [];
  for (let h2Section of h2Sections) {
    const h3s = h2Section.get('H3s');
    h3Sections.push(...h3s);
  }

  const data = buildJSON(h2Sections, h3Sections);

  // Create the initial result object
  const result = {
    H1: article[FieldNames.H1],
    Intro: article[FieldNames.Intro],
    H2s: [],
    Conclusion: article[FieldNames.Conclusion]
  };

  // Sort the H2 Sections by their position field
  const sortedH2Sections = h2Sections.sort((a, b) => a[FieldNames.Position] - b[FieldNames.Position]);

  // Loop through the sorted H2 Sections and create the result object for each
  for (const h2Section of sortedH2Sections) {
    const h2Result = {
      H2: h2Section[FieldNames.H2],
      Intro: h2Section[FieldNames.Intro],
      Text: h2Section[FieldNames.Text],
      H3s: [],
      Conclusion: h2Section[FieldNames.Conclusion]
    };
// Filter the H3 Sections that belong to the current H2 Section and sort them by their position field
    const filteredH3Sections = h3Sections.filter(h3Section => h3Section[FieldNames.H2] === h2Section);
    const sortedH3Sections = filteredH3Sections.sort((a, b) => a[FieldNames.Position] - b[FieldNames.Position]);

// Loop through the sorted H3 Sections and create the result object for each
    for (const h3Section of sortedH3Sections) {
      const h3Result = {
        H3: h3Section[FieldNames.H3],
        Text: h3Section[FieldNames.Text]
      };

   h2Result.H3s.push(h3Result);
  }
  result.H2s.push(h2Result);
 }

  const jsonString = JSON.stringify(result);

  // Send the JSON string as the workflow API result
  console.log('JSON String:', jsonString);
  response.success(jsonString);
});

If someone has an idea how to create a JSON of a thing? I would love it. Thanks a lot!

1 Like