1
votes

Comment obtenir un paramètre d'objet à partir d'un élément li qui a append

J'ai des «données» simples, notamment des balises li et des données. puis je l'ai ajouté à la balise «ul». Je veux que chaque balise li puisse cliquer pour transmettre ses données à txtBox.

J'utilise 'for loop' pour ajouter une valeur de chaîne comme ..

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>

In function getet J'attends un clic pour envoyer un objet comme ...

li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}

Alors. peut utiliser une valeur dans un objet comme ... getData.name, getData.job, ...

window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += '<li onclick="getset(' + data[i] + '  )">' + data[i].name + '</li>';
            }
     
            $("ul").append(datata);
        }

        function getset(data) {
            console.log("1");
            console.log(data);
        }

mais .. tout ce que j'obtiens juste l'erreur 'Uncaught SyntaxError: Identifiant inattendu '

Pourquoi est-ce arrivé ?? merci

function getset(getData){
 getData.name = document.getElementById("txtBox").value;
}

{
   id: 1,
   name: "namename1",
   lname: "imlname1",
   job: "artist",
   ages: "17"
}

datata = '<li onclick = "getset('+ data[i] +')></li>">';

Dernier résultat, je vais créer une zone de texte pour rechercher des données à partir de 'données', variable, puis cliquer pour obtenir les données complètes de la zone de texte.

javascript jquery html object parameters

2 commentaires

"Dans la fonction getset, je m'attends à cliquer pour envoyer pour 1 objet" - eh bien, il y a votre problème.

Salut @savecost, veuillez utiliser data [i] .id au lieu de data [i] où vous créez le li dynamique. Merci.

6 Réponses :

-2
votes

Vous êtes passign en tant que paramètre d'un objet. Html ne prend pas en charge les objets params. J'ai corrigé votre code:

Vous devez transmettre data [i] .id et non data[i .

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>

Ensuite, récupérez par l'identifiant l'élément de la collection:

li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}

window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += '<li onclick="getset(' + data[i].id + '  )">' + data[i].name + '</li>';
            }
     
            $("ul").append(datata);
        }

        function getset(id) {
            const match =  data.find(e => e.id === id);
            console.log('Selection: ', match);
        }

 function getset(id) {
                        const match =  data.find(e => e.id === id);
                        console.log('Selection: ', match);
                    }

 for (let i = 0; i < data.length; i++) {
        datata += '<li onclick="getset(' + data[i].id + '  )">' + data[i].name + '</li>';
    }

1 commentaires

@savecost a complété l'exemple

-1
votes

datata = '<li onclick = "getset('+ data[i] +')"></li>';

2 commentaires

Correct, mais cela ne résoudra pas le problème des OP.

@ Freedomn-m en fait. Voyez une vue d'ensemble.

1
votes

Le principal problème est que vous essayez d'ajouter un objet à une chaîne, et donc le type est forcé et, dans ce cas, les données dont vous avez besoin sont perdues.

Une solution de contournement serait de créer un tableau d'objets jQuery que vous souhaitez ajouter, chacun ayant son objet pertinent stocké dans un attribut data sur l'élément, qui peut être facilement accessible à partir d'un gestionnaire d'événements délégué quelque chose comme ceci:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="search" id="txtBox">
<ul id="ulTag"></ul>

li {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  /* Make it into a block element to fill the whole list */
  position: relative;
}

li:hover {
  background-color: #adadad;
}

$(function() {
  var data = [{
    id: 1,
    name: "namename1",
    lname: "imlname1",
    job: "artist",
    ages: "17"
  }, {
    id: 2,
    name: "namename2",
    lname: "imlname2",
    job: "artist",
    ages: "25"
  }, {
    id: 3,
    name: "namename3",
    lname: "imlname3",
    job: "artist",
    ages: "15"
  }];

  var datata = data.map(function(o) {
    return $('<li />', { text: o.name }).data('object', o);
  }); 
  
  $("ul").append(datata).on('click', 'li', function() {
    console.log($(this).data('object'));
  });  
});

var datata = data.map(function(o) {
  return $('<li />', { text: o.name }).data('object', o);
}); 

$("ul").append(datata).on('click', 'li', function() {
  console.log($(this).data('object'));
});

0 commentaires

0
votes

Vous pouvez utiliser des littéraux de modèle et vous devez utiliser JSON.stringify pour transmettre l'objet en tant que paramètre.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>

li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}

window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += `
                  <li onclick=getset(${JSON.stringify(data[i])})> ${data[i].name}</li>
                `;
            }
     
            $("ul").append(datata);
        }

        function getset(data) {
            console.log("1");
            console.log(data);
        }

datata += `<li onclick=getset(${JSON.stringify(data[i])})>${data[i].name}</li>`;

1 commentaires

c'est une si mauvaise pratique.

0
votes

merci à tous pour vos réponses et merci à Rory. Je reçois une idée de votre part.

que je comprends .. si vous utilisez

getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"});

le résultat est

getset(data[0]);

alors je essayez d'utiliser ..

datata = '<li onclick="getset(data[' + i + '])">' + data[i].name + '</li>';

est ..

<li onclick = "getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"})></li>">';

pas ...

datata = '<li onclick = "getset('+ data[i] +')></li>">';

Cela fonctionne aussi mais je ne suis toujours pas sûr que ce soit la bonne manière.

0 commentaires

0
votes

Rory a expliqué la raison pour laquelle votre code ne fonctionne pas et une solution de contournement avec jQuery. Voici une autre solution de contournement avec vanilla JS qui

1) Attache chaque propriété d'objet en tant qu'attribut de données à chaque élément de liste

2) Ajoute un seul écouteur d'événement au

au lieu d'un par élément de liste pour écouter les événements de ses enfants alors qu'ils remontent dans le DOM ( délégation d'événements a >).

<ul id="ulTag"></ul>

const data = [{"id":1,"name":"namename1","lname":"imlname1","job":"artist","ages":"17"},{"id":2,"name":"namename2","lname":"imlname2","job":"artist","ages":"25"},{"id":3,"name":"namename3","lname":"imlname3","job":"artist","ages":"15"},{"id":4,"name":"namename4","lname":"imlname4","job":"artist","ages":"18"},{"id":5,"name":"namename5","lname":"imlname5","job":"artist","ages":"27"}];

function handleClick(e) {

  // Destructure the dataset from the event target
  const { target: { dataset: { name, job, ages } } } = e;
  console.log(name, job, ages);
}

// `map`over the data and create an array of list items
const lis = data.map(obj => {
  return (
    `<li
      data-name="${obj.name}"
      data-job="${obj.job}"
      data-ages="${obj.ages}"
     >${obj.name}</li>`
  );
});

// Grab the `ul` element, add the list items to it, and add
// an event listener to listen for click events
const ul = document.querySelector('#ulTag');
ul.innerHTML = lis.join('');
ul.addEventListener('click', handleClick, false);

0 commentaires