Dev Faq
0
votes

Analysez et accès aux données dans JSON en prenant des valeurs des champs de saisie de la table: JavaScript

     <html>
        <body>
        <table id="table"> 
        <tr> 
        <td><input name="name" type="text"><input name="id" type="hidden"></td>
        <td><input name="age" type="text"></td>
        <td><input name="qty"type="text"></td>
        <td><input name="perc" type="text"></td> 
        <td><input name="address" type="text"></td>
        </tr> 
        </table>
        <button onclick="show()">show</button>
        </body>
        </html>
        <!-- language: lang-js -->
<script>
        function show(){
            var data = '[';
            $("#table tr").each(function() {
              data += '{"name":"' +     $(this).find('td').eq(0).find('input[type="text"]').val() + 
                      '","id":"' +      $(this).find('td').eq(0).find('input[type="hidden"]').val() + 
                      '","age":"' +     $(this).find('td').eq(1).find('input[type="text"]').val() + 
                      '","qty":"' +     $(this).find('td').eq(2).find('input[type="text"]').val() + 
                      '","perc":"' +    $(this).find('td').eq(3).find('input[type="text"]').val() + 
                      '","address":"' + $(this).find('td').eq(4).find('input[type="text"]').val() + '"},'
              });
              data += ']';
        var p = data;
            var arr = JSON.parse(JSON.stringify(p));
            alert(arr[0].name);
        }
        </script>
        <!-- end snippet -->
How to parse and access data?
I want the output to be first value of first input field.
The above code gives value as undefined.
The key in json is independent of input field name.
5 commentaires

Pourquoi json.parse (json.stringify (p)); - c'est la même que p qui est identique à data

S'il vous plaît poster des HTML

Veuillez mettre à jour la question au lieu de coller le code dans un commentaire - et que les champs n'ont pas de noms ???? Ma réponse s'appuie sur eux ayant des noms

J'ai mis à jour peut répondre à un exemple de reproductible minimal maintenant que vous avez montré le code HTML.

3 Réponses :

-1
votes

imo, vous ne devez pas construire une chaîne puis convertir en JSON. Vous pouvez créer un objet JavaScript directement. 

var data = [];
$("#table tr").each(function() {
    data.push({
        name: $(this).find('td').eq(0).find('input[type="text"]').val(),
        id: $(this).find('td').eq(0).find('input[type="hidden"]').val(),
        age: $(this).find('td').eq(1).find('input[type="text"]').val(),
        qty: $(this).find('td').eq(2).find('input[type="text"]').val(),
        perc: $(this).find('td').eq(3).find('input[type="text"]').val(),
        address: $(this).find('td').eq(4).find('input[type="text"]').val()
    })
});

0 commentaires
-2
votes

Le plus élégant consiste à utiliser une carte - surtout si vous avez plus d'une ligne

Peut-être que les descendeurs rétracteront leurs votes de Vendetta maintenant, je montrent que cela fonctionne comme prévu p>

P> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td><input name="name" type="text" value="Joe"><input name="id" type="hidden" value="ID1"></td>
    <td><input name="age" type="text"></td>
    <td><input name="qty" type="text"></td>
    <td><input name="perc" type="text"></td>
    <td><input name="address" type="text"></td>
  </tr>
  <tr>
    <td><input name="name" type="text" value="Jane"><input name="id" type="hidden" value="ID2"></td>
    <td><input name="age" type="text"></td>
    <td><input name="qty" type="text"></td>
    <td><input name="perc" type="text"></td>
    <td><input name="address" type="text"></td>
  </tr>
</table>
<button type="button" id="show">Go</button>

0 commentaires
-1
votes

Je pense que vous allez courir dans toutes sortes de problèmes si vous essayez de générer le JSON vous-même, je ferais plutôt quelque chose comme ceci: 

var data = [];
$("#table tr").each(function() {
    data.push({
        name: $(this).find('td').eq(0).find('input[type="text"]').val(),
        id: $(this).find('td').eq(0).find('input[type="hidden"]').val(), 
        age: $(this).find('td').eq(1).find('input[type="text"]').val(),
        qty: $(this).find('td').eq(2).find('input[type="text"]').val(),
        perc: $(this).find('td').eq(3).find('input[type="text"]').val(),
        address: $(this).find('td').eq(4).find('input[type="text"]').val()
    });
});
console.log(data[0].name);

4 commentaires

@mplungjan Votre code 1. a une erreur de syntaxe et 2. suppose que ses entrées ont un attribut de nom, que nous ne connaissons pas.

Correction de l'erreur de syntaxe et je sais que nous ne savons pas, mais de garder le $ (ceci) .Find ('TD'). EQ (0) .Find ("entrée [type =" texte "] ') / code> est si inélégant

Je suis d'accord, ce n'est pas joli, mais le code qui fonctionne est plus élégant que le code qui ne le fait pas, donc sans plus d'informations, je tiendrai l'inélégant encore plus susceptible de travailler en réalité.

Alors maintenant, j'ai eu la pertinence HTML, je peux prouver que ma version fonctionne.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO