jQuery Girl
  1. jQuery Girl
  3. Formater et append des données JSON au format html div
Intereting Posts
removeAttr (“style”) ne fonctionne pas Twitter Bootstrap – comment append de la marge entre l’info-bulle et l’élément jquery: fade in image après image fixer des hauteurs égales aux colonnes Lecture de fichier Excel dans Reactjs Comment obtenez-vous la valeur cochée de asp: RadioButton avec jQuery? jQuery html () dans Firefox (utilise .innerHTML) ignore les modifications du DOM jquery clone select ne conserve pas la valeur passer l’argument à la fonction passé en argument à la fonction jQuery jQuery animate top top jQuery UI datepicker maxdate Je suis coincé avec le concept de fading in and out dans jQuery Supprimer de la colonne lors de l’exportation XLS Lien externe fenêtre Popup Boîte de dialog jQuery UI 1.10 – empêche l’insertion avant

Formater et append des données JSON au format html div

J’utilise les données JSON dans mon application et voici un exemple de code de mes données json. 

{ "myMenu":[ { "id":"1", "name":"name 01", "image":"img_url", "other":[ { "image":"img_url", "name":"name_01" }, { "image":"img_url", "name":"name_02" }, { "image":"img_url", "name":"name_03" }, { "image":"img_url", "name":"name_04" }, { "image":"img_url", "name":"name_05" } ] }, { "id":"2", "name":"name 02", "image":"img_url", "other":[ { "image":"img_url", "name":"name_01" }, { "image":"img_url", "name":"name_02" }, { "image":"img_url", "name":"name_03" }, { "image":"img_url", "name":"name_04" }, { "image":"img_url", "name":"name_05" } ] }, { "id":"3", "name":"name 03", "image":"img_url", "other":[ { "image":"img_url", "name":"name_01" }, { "image":"img_url", "name":"name_02" }, { "image":"img_url", "name":"name_03" }, { "image":"img_url", "name":"name_04" }, { "image":"img_url", "name":"name_05" } ] } ] }

Je dois obtenir un identifiant dans une rangée.

Supposons que les données id 1, je dois afficher les données id 1 et ses 5 autres données dans une ligne. Puis id 2 données, comme bien.

C’est comme ça que je regarde cette sortie,

C’est ce que j’ai essayé, 

  $.getJSON('data.json', function(data) { $.each(data.myMenu, function(key, value) { $('#content').append('
'); $('.headings').append('
name
'); $.each(value.other, function(key, value) { $('.headings').append('
name 2
'); }); }); });

Tout ce que vous avez à faire est d’écrire quelques boucles pour parcourir vos tableaux. Voici un exemple de solution utilisant .forEach() . 

 var obj = { "myMenu":[ { "id":"1", "name":"name 01", "image":"img_url", "other":[ { "image":"img_url", "name":"name_01" }, { "image":"img_url", "name":"name_02" }, { "image":"img_url", "name":"name_03" }, { "image":"img_url", "name":"name_04" }, { "image":"img_url", "name":"name_05" } ] }, { "id":"2", "name":"name 02", "image":"img_url", "other":[ { "image":"img_url", "name":"name_01" }, { "image":"img_url", "name":"name_02" }, { "image":"img_url", "name":"name_03" }, { "image":"img_url", "name":"name_04" }, { "image":"img_url", "name":"name_05" } ] }, { "id":"3", "name":"name 03", "image":"img_url", "other":[ { "image":"img_url", "name":"name_01" }, { "image":"img_url", "name":"name_02" }, { "image":"img_url", "name":"name_03" }, { "image":"img_url", "name":"name_04" }, { "image":"img_url", "name":"name_05" } ] } ] }; obj.myMenu.forEach(function(item) { var element = $('
' + item.name + '
'); item.other.forEach(function(otherItem) { var otherElement = $('
' + otherItem.name + '
'); element.append(otherElement); }); $("body").append(element); });