Create input fields according to the size of an array

Question

Create input fields according to the size of an array

Navigation

#1 by (1 votes)

1

Good evening, I'm getting via JSON a List with the structure below:

anexo: [{cod: 5, nome: "anexo1.pdf"}, {cod: 6, nome: "texto.txt"}]

And I use the function below:

$.getJSON(url + cod,
                    function (ajax) {
                        for (var i = 0; i < ajax.anexo.length; i++) {
                            //alert(ajax.anexo[i].nome);
                            $.each(ajax.anexo[i], function (k, value) {
                                $("#formAnexo").find($('[name="anexo.' + k + '"]')).each(function () {
                                    setElementValue(this, value, 'anexo.' + k);
                                });
                            });

                        }
                    });

This function gets the data from JSON and fills the <textarea> of my form. In case of only 1 item, it is working. Now if there are 2 or more items, like the structure I presented at the beginning, only one data is appearing in the form (the latter overwrites the previous ones - so I understood).

My form looks like this:

<label>Anexo:</label>
<textarea rows="5" id="nome" readonly="nome" name="anexo.nome" ></textarea>

How can I fix this so that my JSON has a% w of% of 2 or more items, and that these are added to this% w / o%?

javascript json jsp

asked by anonymous 21.04.2015 / 04:50

1 answer

How to get data returned from a post request Refresh Jframe [closed]

score 1 · Accepted Answer

There are some issues with your code:

First you iterate over the elements of JSON, then you iterate over the properties of each element; in my opinion, it would be enough to iterate over the elements, right?

for (var i = 0; i < ajax.anexo.length; i++) { // Itera sobre os elementos

    //alert(ajax.anexo[i].nome); // Isso me parece correto

    $.each(ajax.anexo[i], function (k, value) { // Itera sobre o elemento?
        // k == "cod", value == 5
        // k == "nome", value == "anexo1.pdf"

The '[name="anexo.' + k + '"]' selector will select all elements with the name anexo.nome (and anexo.cod ), no matter which outer loop iteration you are in. So yes, the subsequent elements will overwrite the previous ones.

The find method accepts a selector, element, or jQuery object. This is correct:

$("#formAnexo").find($('[name="anexo.' + k + '"]')).each

But it's simpler to do:

$("#formAnexo").find('[name="anexo.' + k + '"]').each

The right way to do it depends on your intention. It was not clear in the question whether there is a single textarea or several, but from what has been exposed I will assume that it is only one. In that case, I suggest to accumulate names in a list, and at the end assign them at once:

var ajax = { anexo: [{cod: 5, nome: "anexo1.pdf"}, {cod: 6, nome: "texto.txt"}] };

var nomes = [];
for (var i = 0; i < ajax.anexo.length; i++) {
  nomes.push(ajax.anexo[i].nome);
}

$("#formAnexo").find('[name="anexo.nome"]').each(function() {
  this.value = nomes.join("\n");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="formAnexo">
  <label>Anexo:</label>
  <textarea rows="5" id="nome" readonly="nome" name="anexo.nome" ></textarea>
</form>