Create dynamic elements within bootstrap-vue using data from a JSON file

Currently, I am utilizing BootstrapVue (Bootstrap 4.6 and VueJS 2)!

My objective is to dynamically generate elements such as input fields, dropdowns, and checkboxes based on a JSON file structured like so:

[
  {
      "unique_number": "1111",
      "key": "key1",
      "label": "Input 1",
      "input": "text",
      "value": ""
  },
  {
      "unique_number": "2222",
      "key": "key2",
      "label": "Input 2",
      "input": "text",
      "value": ""
  },
  {
      "unique_number": "3333",
      "key": "key3",
      "label": "Input 3",
      "input": "number",
      "value": ""
  }
]

Ultimately, I aim to have 3 input fields with corresponding labels (Input 1, Input 2, Input 3).

However, I have been unable to find adequate resources online to achieve this. Any assistance on this matter would be greatly appreciated!

javascriptjsonvue.jsvuejs2bootstrap-vue

Answer №1

To effectively work with the data, it is necessary to iterate through it and create a component that utilizes the data extracted from the .map method.

const items = [
    {
        "unique_number": "1111",
        "key": "key1",
        "label": "Input 1",
        "input": "text",
        "value": ""
    },

    {
        "unique_number": "2222",
        "key": "key2",
        "label": "Input 2",
        "input": "text",
        "value": ""
    },

    {
        "unique_number": "3333",
        "key": "key3",
        "label": "Input 3",
        "input": "number",
        "value": ""
    }
]

Although I don't have experience with Vue, the process is likely similar to React:

items.map((item, index) => {
   return (
    <div key={index}>
      <SomeComponent prop={item.prop}/>
   </div>
   )
}

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 Sequelize query to search for results that are similar to a specific

I am currently working on constructing a search query in Sequelize to query a MySql database. My goal is to search for a specific text across multiple fields, including JSON data. In the JSON field, I want to search for the text anywhere within the data, n ...

mysqljsonsequelize.js

Waiting for the result of an AngularJS promise

When I click a button in my AngularJS app, the following code is executed: if (!$scope.isChecked) { $scope.getExistingName($scope.userName).then(function (data) { $scope.userName = data; }); } // Additional processing code foll ...

javascriptangularjs

Using private members to create getter and setter in TypeScript

Recently, I developed a unique auto getter and setter in JavaScript which you can view here. However, I am currently unsure of how to implement this functionality in TypeScript. I am interested in creating an Object Oriented version of this feature if it ...

javascriptooptypescriptgetter-setter

AngularJs and graph representation

After attempting to generate charts using angular-chart, I followed all the necessary steps and requirements outlined in the documentation. However, upon completion, my canvas element failed to display any content. My HTML Layout: Here is a snippet of my ...

javascripthtmlangularjsangular-chart

What is the process for activating my redux function within a component?

I'm working on a form that should create a new user when submitted. In my handleCreate function, I want to use Redux to trigger the addUser action and update the state to add the new user. However, it seems like I'm having trouble calling the act ...

javascriptreactjsreduxreact-reduxantd

Having trouble setting a background image for a specific DIV element in HTML

I am in the process of updating my webpage, and need some assistance implementing a small background image. Here is what I have done so far: https://i.sstatic.net/nTxtD.png Below is the marked section where I am trying to add the background image: https ...

javascripthtmlcss

Issue with hidden input field not displaying array on submission

I need assistance with adding filenames that have been uploaded to an array in a hidden input field within a form. Here's what I currently have in my form: <input type="hidden" name="myFiles[]" id="myFiles" value=""> This is how my file upload ...

javascriptphpjqueryarrayssymfony

Are there any methods for simultaneously hosting both React and vanilla JavaScript websites?

I want to host a full-fledged web application that is primarily implementing ReactJS, but also contains sections utilizing vanilla JavaScript. Is it possible to host a web app that combines both React and vanilla JavaScript functionalities? (My backend i ...

javascriptnode.jsreactjsherokuhosting

Verify if the parsed JSON data is equal to NSNULL

I need assistance with parsing a JSON response and checking if one of my keys is null. Here is the code I am currently using: var routingNumber = (dic.value(forKey: "result") as! NSDictionary).value(forKey: "routingNumber") as! String When I run this cod ...

jsonswiftnsnull

Adjust the size of the plane in Three.js to match the entire view

English is not my strong suit, as I am Japanese. I apologize for any confusion. Currently, my focus is on studying Three.js. I aim to position a Plane directly in front of the camera as the background. My goal is to have the Plane background fill the en ...

javascripthtmltypescriptthree.js

Issue with webcomponents-lite.js file

Encountering this particular error message in the console while attempting to run the application: webcomponents-lite.js:64Uncaught TypeError: Cannot read property 'getAttribute' of null at webcomponents-lite.js:64 at Object.549 (webcomp ...

javascriptwebpackweb-component

Unable to connect to node.js webserver using the godaddy shared hosting URL

Upon entering www.example.com:3000 into my browser, I am encountering the following error message (where 'example' represents my domain name) This site can't be reached - www.example.com took too long to respond. I have taken the following ...

javascriptnode.jsshared-hosting

Rails Ajax issue encountered

I previously followed a coderwall tutorial on ajax but encountered an ActionController::UnknownFormat error when attempting to open the link in a new tab (Link Name). Can anyone help me figure out what's wrong? Thanks! Additionally, clicking the link ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Email Form Application: Utilizing NodeJs and Express - Error: URL Not Found /

I'm encountering a "cannot GET" error whenever I try to run my application on a live server using VS Code. My assumption is that the issue lies within my routing configuration, but I'm struggling to identify the exact problem. Any assistance woul ...

javascripthtmlcssnode.jsexpress

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

javascripthtmlcsshtml-table

Creating a linear video playback system

Having an issue with my code in Chrome where auto play is enabled, but the video won't play. I have a loop set up to play each video one after the other, but first things first - how do I get this video to start playing? If there's a pre-made so ...

javascriptjqueryhtmlvideo

Facing CORS Error with Nuxt.js Axios within Vuex Module

While using Nuxtjs and built-in Vuex modules with Nuxtjs's official axios, I encountered a CORS error when trying to GET from my local server. In an attempt to resolve this issue, I made an API call to Github's public endpoint but faced the same ...

ajaxvue.jspromiseaxiosvuex

Instructions on extracting a random element from an array and continue removing elements from the array until it is completely empty

I am attempting to utilize either jquery or javascript to remove a random item from an array until it is empty. Each time I remove an item, I want to log it to the console. My goal is to create elements with random images from the specified array until all ...

javascriptjqueryarraysfor-loop

Is there a way to identify when no rows contain specific values in PostgreSQL or node.js and return false?

Here is an example of a table: P Q t f f t f f In SQL, is there a way to return false when querying for t t, but true when querying for t f, f t, or f f? Should this be handled with node.js by first doing a select and then using if-else statements based ...

javascriptsqlnode.jspostgresqlselect

In the world of Angular, whitespace is simply treated as non-existent when it comes

Within the controller, I have an array structured as follows: 'Pipe': '|', 'Comma': ',', 'Tab': '\t' }; When configuring ng-options in my code, it is implemented in this manne ...

javascripthtmlangularjsng-options