Comment renseigner le nombre de divs html nestedes à partir d’un fichier json externe?

Comment récupérer des données d’objects / tableaux JSON (dans un fichier JSON externe) vers leurs div nestedes respectives en HTML sur la page onLoad of html

        
 
 
My Accounts
 
 
 
I Have (in 4 Accounts)
 
+USD 13,700.00
 
 
  
 
 
Regular
 
 
  
 
 
 
  
 
 
 
Regular
 
 
  
 
 
 
  
 
Regular
 
 
  
 
 
 
  
 
Regular
 
 
  
 
 
 
 
I Owe (from 3 Accounts)
 
-USD 33,4500.00
 
 
  
 
Regular
 
 
  
 
 
 
  
 
 
Regular
 
 
  
 
 
 
 
 
 
MyOverdraft
 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
   

Fichier JSON:

 var mainObject = { "Main": [{ "I_Have": [{ "MyMainSavings": { "MyMainSavingsTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 5,600.00", "Rate": "" }, "MyMainSavingsBottom": [{ "Available": "Available", "Value": "$4329" }, { "Clear": "Clear", "Value": "$3456" }, { "Hold": "Hold", "Value": "$5000" }] } }, { "MyEverydayExpenses": { "MyEverydayExpensesTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 600.00", "Rate": "" }, "MyEverydayExpensesBottom": [{ "Available": "Available", "Value": "$4329" }, { "Clear": "Clear", "Value": "$3456" }, { "Hold": "Hold", "Value": "$7300" }] } }, { "FavDeposit": { "FavDepositTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 5,000.00", "Rate": "@4.5%" }, "FavDepositBottom": [{ "MaturityValue": "Maturity Value", "Value": "$4009" }, { "Term": "Term", "Value": "$1156" }, { "MaturesOn": "Matures On", "Value": "$5000" }] } }, { "MyDeposit": { "MyDepositTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 8,600.00", "Rate": "@4.5%" }, "MyDepositBottom": [{ "MaturityValue": "Maturity Value", "Value": "$4329" }, { "Term": "Term", "Value": "$3456" }, { "MaturesOn": "Matures On", "Value": "$5000" }] } }] } 

La question est donc que l’object MyMainSavings de JSON doit pointer sur div avec le nom de classe MyMainSavings, etc. pour leurs enfants respectifs.

• Convertir HTML TABLE en HTML5 TABLE avec CSS et par défaut
• $ .css (‘transform’) retourne une mauvaise valeur rotation
• Faire suivre la division latérale après un certain défilement
• bootstrap-selectpicker ne change pas la largeur de la boîte
• Javascript – window.getComputedStyle renvoie «auto» en tant que propriétés d’élément supérieure et gauche

• JQUERY – ajoute la classe CSS à l’élément BUTTON après avoir cliqué
• Naviguer dans deux tableaux HTML avec le texte saisi à l’aide des touches fléchées
• (Éditeur de texte enrichi Jquery) Comment corriger un bogue dans l’éditeur de texte enrichi – lorsque vous appuyez sur entrée dans la balise ‘br’ créée par Firefox mais dans la balise ‘p’ créée par IE?
• Conserver l’état de survol sur le parent du menu déroulant
• Faire une image correspond à son élément parent

 mainObject.Main[0].I_Have[0].MyMainSavings.MyMainSavingsTop 

 for (var i in mainObject.Main[0]) console.log(i); > I_Have for (var i in mainObject.Main[0].I_Have[0]) console.log(i); > MyMainSavings