Python tuples in JavaScript

Question

Python tuples in JavaScript

Navigation

#1 by (1 votes)

0

I have a tuple (or a list) in Python, which works to fill a <select> control in the Django templates.

The tuple looks like this in Python:

DOCUMENTO_GENERICO = (
    (0, 'FUAR y/o Sol. Ind.'),
    (1, 'Testimonial'),
    (2, 'Instancia administrativa'),
    (3, 'Demanda de juicio')
)

But now that I try to use JavaScript, I'm faced with a behavior I can not understand. I made a similar structure in JavaScript:

docs: [
  {0: 'Solicitud Individual'},
  {1: 'Testimonial'},
  {2: 'Instancia administrativa'},
  {3: 'Demanda de juicio'}
]

And I use it in the following way:

var app = new Vue({
  el: '#app',
  data: {
    title: 'Tuplas en JavaScrirpt',
    docs: [
      {0: 'Solicitud Individual'},
      {1: 'Testimonial'},
      {2: 'Instancia administrativa'},
      {3: 'Demanda de juicio'}
    ]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ title }}
  <select name="documento" id="documento">
    <option  v-for="doc in docs" :value="doc[0]">{{ doc[1] }}</option>
  </select>
</div>

I thought that in a line doc I found a line of docs , for example {0: 'Solicitud Individual'} , in Python, I would do something like DOCUMENTO_GENERICO[0][1] to get Solicitud Individual , but in JavaScript the result is not as expected.

I want to know what data structure I can use in JavaScript to reproduce the same behavior I use in Python, because this would fix the way I use the <select> control.

javascript vue.js

asked by toledano 04.04.2017 в 04:03

source

1 answer

Limit the time in a html and php form How to activate / deactivate a list of buttons "Bootstrap Toggle" from javascript?

score 1 · Accepted Answer

Your use case is atypical, because you are not passing an array of homogeneous elements or an object to docs . In return you pass an array of objects that are not homogeneous with each other.

Assuming that your intention is indeed that the keys of each of your objects were numerical and correlative, then what you want to do is done like this:

var app = new Vue({
  el: '#app',
  data: {
    title: 'Tuplas en JavaScrirpt',
    docs: [
      {0: 'Solicitud Individual'},
      {1: 'Testimonial'},
      {2: 'Instancia administrativa'},
      {3: 'Demanda de juicio'}
    ]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ title }}
  <select name="documento" id="documento">
    <option  v-for="(doc,index) in docs" :value="index">{{ doc[index] }}</option>
  </select>
</div>

But if so, then it would be more efficient to have declared

docs: [
   'Solicitud Individual',
   'Testimonial',
   'Instancia administrativa',
   'Demanda de juicio'
]

So I guess that actually the Python tuple could bring any ID, not necessarily correlatives. For example:

DOCUMENTO_GENERICO = (
    (0, 'FUAR y/o Sol. Ind.'),
    (10, 'Testimonial'),
    (20, 'Instancia administrativa'),
    (30, 'Demanda de juicio')
)

In which case you should use the docs property as an object:

docs: {
    0: 'Solicitud Individual',
    10: 'Testimonial',
    20: 'Instancia administrativa',
    30: 'Demanda de juicio'
}

var app = new Vue({
  el: '#app',
  data: {
    title: 'Tuplas en JavaScrirpt',
    docs: {
	    0: 'Solicitud Individual',
        10: 'Testimonial',
        20: 'Instancia administrativa',
        30: 'Demanda de juicio'
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ title }}
  <select name="documento" id="documento">
    <option  v-for="(value,key) in docs" :value="key">{{ value }}</option>
  </select>
</div>