Enumeration field with Conditional logic

I am currently developing a Content Management System (CMS) using strapi for a client, and I want to provide them with the ability to control the questions included in a questionnaire. Each question will be categorized under different sections in the questionnaire:

-Section 1
---Question
---Question
-Section 2
---Question
---Question

Within strapi, I have created a collection type with two fields: Section (enumeration type) and Question (text type).

One challenge I am facing is that strapi does not allow spaces in the enumerations, so I have had to name my sections as "business_info" instead of "Business Information". To solve this issue, I have implemented a simple mapping function (a method in Vue.js) to display the correct section name:

sectionMapping(section) {
 switch(section) {
     case 'business_info': 
         return 'Business Information';
     case 'target_market':
         return 'Target Market';
     default: 
         return 'Section'
}

However, this approach requires a code update every time a new section is added to the questionnaire, which is not the most efficient solution. I have considered changing the section from an enumeration to a text data type, but this opens up the possibility of typos creating duplicate sections. This is why I prefer the use of enumerations.

Do you have any tips or suggestions on how to improve this process?

Thank You

Answer №1

To achieve this task in a more dynamic manner, consider replacing underscores with spaces and capitalizing the first letter of each word.

Begin by splitting the string into an array using the split function.

Subsequently, iterate through the resulting array using map, and convert the first letter of each word to uppercase. Refer to the following example borrowed from this query:

section.charAt(0).toUpperCase() + s.slice(1);

Lastly, utilize join to merge the array of strings with a space as a separator. By incorporating these steps, you can create a function resembling the following:

sectionMapping(section) {
    return section.split("_")
        .map(s => s.charAt(0).toUpperCase() + section.slice(1))
        .join(" ");
}

Remember to adjust the handling of the default case to return "Section". This approach eliminates the necessity of constantly modifying the function when introducing new section titles.

Answer №2

Although I may be a bit tardy in sharing this information, it could still be beneficial to someone.

Strapi (specific version unknown) now has the capability to manually transform enums into more user-friendly forms through code. For instance, you can input "business_info" in the code, but later change it to "Business Information" without encountering any issues.

This modification can be applied to both components and models. To locate this feature easily, simply search for "enumeration". view image description here

view image description here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a fresh array by extracting information from a different array column using the .map() function in Vue.js and Laravel

Here is the array I am working with: [ {product: "banana", quantity: "0", price: "32"} {product: "tomato", quantity: "1", price: "45"} {product: "mango", quantity: "2", price: "56"} ] My goal now is to create a new array containing only the product va ...

What is the reason Angular is unable to locate a controller for a directive in an external file?

As a newcomer to Angular, I'm struggling to comprehend John Papa's recommendations. His guidelines suggest placing controller logic inside directives, but this approach doesn't seem intuitive to me. Despite my efforts to implement it myself, ...

Retrieve data from a variable that is located within a function that is also

<script> const tally ={ total: 0, increase: function(){ total++; console.log(total); } } const selectBtn = document.getElementsByTagName('button& ...

Even with manual installation, the npm package still encounters dependency errors

Having trouble implementing the Imgur package from NPM into my Angular web app. The installation and import seemed to go smoothly, but when initializing a variable with the package, I encounter compile errors pointing to missing dependencies like 'cry ...

What could be causing AngularJS to truncate my URL in the search bar?

Currently, I am in the process of setting up a state provider for a CRUD website. One issue I encountered is that when I navigate to www.mysite.com/posts/mypost, the URL gets shortened to www.mysite.com/mypost and does not trigger the controller as intend ...

Refreshing the current window with the ``Window.location.reload()`` function

I have integrated a map that displays clients using markers. The map I am utilizing is Leaflet with an AngularJS directive. The issue I am facing is that when I initially access the map, it functions correctly. However, when I change routes, all the marke ...

Tips for eliminating the default arrow on the HTML select tag?

I am currently utilizing vuejs along with tailwindcss and I am trying to figure out how to get rid of the default arrow from an HTML select element. Despite my attempts to remove it by using CSS properties like -moz-appearance, -webkit-appearance, -ms-appe ...

(Critical) Comparing AJAX GET Requests and HTTP GET Requests: identifying the true client

When a typical GET request is made through the browser, it can be said that the browser acts as the client. However, who exactly serves as the client in the case of a GET request via AJAX? Although it still occurs within the browser, I am intrigued to delv ...

Sorting tables with jQuery UI sortable() and rowspan功能

Can jQuery UI's sortable() be configured to sort rows based on their "containing" element only? I have a table with rowspanned cells that should only be sorted within their respective spanned columns. var $sortable = $('.nested-sortable tbody&ap ...

Pausing repetitive HTTP requests in an Angular 6 project within a do while loop

While waiting for the completion of one API call, I am recursively consuming an external API. The http calls are being made using import {HttpClient} from '@angular/common/http' As a newcomer to the framework, there may be something wrong in the ...

How to link AngularJS controller from a different module in routing

My current project involves creating a complex app with a structured design: Each module is organized in its own folder structure, including controllers, directives, and more. Within each folder, there is an index.js file along with other files for separ ...

Is it possible for two Bootstrap icon class names to be used sequentially with one taking precedence over the other?

I am having an issue with toggling a class name in my code. I have a class named (bi bi-clipboard) and I want to change it to (bi-clipboard-check) when it is clicked. However, the problem is that the new class name gets added next to the existing one like ...

Troubleshooting issue with file upload feature in Angular for Internet Explorer 9

I have implemented a file upload method using the following code: <input type="file" name="upload-file" ng-model= "excelFile" accept=".xlsx" onchange="angular.element(this).scope().fileChanged(this);" ...

Creating objects with variable-dependent values in node.js

I'm currently working on creating a user database in an object to assign values to each user, but I'm struggling to find a way to accomplish this. I attempted using var data = {} and then eval(`data.user_${user} = value`), however, it only write ...

Some suggestions for updating two div elements using only one Ajax response

My website features a signin() button that I want to enhance with ajax functionality. When the button is clicked, I need it to update two divs: one displaying a personalized welcome message, and the other showcasing a statistics table in a different locati ...

Enable strict mode for older web browsers

I would like to incorporate the "use strict"; statement into my function, but unfortunately it is not compatible with older browsers such as ie7 and ie8. Is there a workaround to ensure this functionality works in legacy browsers? Could someone please cla ...

Combining vue with deno and vscode: A guide to seamless development integration

How can I set up Visual Studio Code for a Vue project using Deno? Important note - the issues mentioned here only pertain to highlighting in VSCode, as the builds, development, and scripts are functioning correctly! Deno + Vue is an appealing choice! You ...

The issue arises when trying to escape double quotes within a regex pattern using ng-pattern

My ng-pattern validation includes a regex pattern ^[^\./:*\?\"<>\|]{1}[^\/:*\?\"<>\|]{0,254}$ to prevent invalid characters in file paths and set a limit. However, when I specify the ng-pattern as: ng-p ...

Guide on performing an inner-join query in Firestore using NextJS

My Firestore database contains two collections that I need to work with. The 'uid' field in the users collection and the 'createdBy' field in the 'anuncios' collection both store the same string data, linking each 'anunc ...

nuxt/vue/webpack - Import map only if the file exists and overwrite

Currently, I'm working on a project where I need to tackle the following challenge: Consider the following file structure: /src/ /src/components/MyComponent.vue /src/overwrites/components/MyComponent.vue In any *.vue file, you'll find this impo ...