generate elements dynamically based on json file in bootstrap-vue

Question

I'm working with BootstrapVue (Bootstrap 4.6 and VueJS 2) !

I want to create elements (input fields, dropdowns, checkboxes, etc.) dynamically based on a json file which is looking like that:

[
    {
        "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": ""
    }
]

So at the end there should be 3 input fields with 3 labels (Input 1, Input 2, Input 3)..

But I actually could not find something online to work with - so it would be very helpful if someone can help me out in this..

You need to forEach element, then use Document.createElement() — Simone Rossaini
– Simone Rossaini, Commented Sep 29, 2021 at 13:42

Eric Pezzulo · Accepted Answer · 2021-09-29 13:49:49Z

1

You need to map through the data, and return a component that takes the data from .map

const array = [
    {
        "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": ""
    }
]

I don't use Vue, but I'm sure its similar to how its done in React:

array.map((element,key) => {
   return (
    <div key={key}>
      <SomeComponent prop={element.prop}/>
   </div>
   )
}

answered Sep 29, 2021 at 13:49

Eric Pezzulo

4092 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sensanaty Over a year ago

Right track, however Vue utilizes directives. In this case it would be <div v-for="element in array"> <input :label="element.unique_number" /> </div>

B0BBY Over a year ago

Thanks for answering - the problem is that I'm importing my json file to a component.. so I could not write "const array = [{}]" - do you have any solution for this?

Eric Pezzulo Over a year ago

const array = require('./<nameOfFile>.json') console.log(array) and see if that prints out your list, you can also try using ES6 module support and use import instead of require

Collectives™ on Stack Overflow

generate elements dynamically based on json file in bootstrap-vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related