Указание объектов JSON на соответствующие HTML-divs

-1

Каков точный способ (javascript/jquery) указать объекты, созданные во внешнем файле JSON, чтобы указать и заполнить их соответствующие html-div. Я отправляю полный код для html и JSON. Также обратитесь к изображению, чтобы получить четкое представление о том, где находятся div и какие данные они хранят.Указание объектов JSON на соответствующие HTML-divs

 <! DOCTYPE html> 
     <html> 
     <meta charset="UTF-8"> 
      <title>first2</title> 
     <head> 
     <link rel="stylesheet" type="text/css" href="jsoncss.css"> 
     </head>  
     <body> 
      <div class="wrapper"> 
       <div class="MyAccountsLabel"> 
      <div class="MyAccountsLeft">My Accounts</div> 
     </div> 
     <div class="LeftSection"> 
      <div class="LeftSectionTopLeft">I Have (in 4 Accounts)</div> 
      <div class="LeftSectionTopRight">+USD 13,700.00</div> 
      <div class="MyMainSavings"> 
       <div class="MyMainSavingsTop"> 
        <table class="MyMainSavingsTop"> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class="InterestRate"> 

        </div> 
        <div class="regular">Regular</div> 
       </div> 
       <div class="MyMainSavingsBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 

          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
      <div class="MyEverydayExpenses"> 
       <div class="MyEverydayExpensesTop"> 
        <table class="MyEverydayExpensesTop"> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class=".InterestRate"> 
         <p></p> 
        </div> 
        <div class="regular">Regular</div> 
       </div> 
       <div class="MyEverydayExpensesBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
      <div class="MyDeposit"> 
       <div class="MyDepositTop"> 
        <table class="MyDepositTop"> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class=".InterestRate"></div> 
        <div class="regular">Regular</div> 
       </div> 
       <div class="MyDepositBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
      <div class="FavDeposit"> 
       <div class="FavDepositTop"> 
        <table class="FavDepositTop"> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class=".InterestRate"></div> 
        <div class="regular">Regular</div> 
       </div> 
       <div class="FavDepositBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
      </div> 
      <div class="RightSection"> 
      <div class="RightSectionTopLeft">I Owe (from 3 Accounts)</div> 
      <div class="RightSectionTopRight">-USD 33,4500.00</div> 
      <div class="HomeLoan"> 
       <div class="HomeLoanTop"> 
        <table class="HomeLoanTop"> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class=".InterestRate"></div> 
        <div class="regular">Regular</div> 
       </div> 
       <div class="HomeLoanBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
      <div class="Ruby"> 
       <div class="RubyTop"> 
        <table class="RubyTop"> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class=".InterestRate"> 

        </div> 
        <div class="regular">Regular</div> 
       </div> 
       <div class="RubyBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
      <div class="MyOverdraft"> 
       <div class="MyOverdraftTop"> 
        <table class="MyOverdraftTop"> 
         <tr> 
          <td>MyOverdraft</td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <td></td> 
        </table> 
        <div class=".InterestRate"> 

        </div> 
        <div class="regular"></div> 
       </div> 
       <div class="MyOverdraftBottom"> 
        <table class="tablebottom"> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td class="right"></td> 
         </tr> 
         <td></td> 
         <td class="right"></td> 
        </table> 
       </div> 
      </div> 
     </div> 
     </div> 
     </body> 
     </html>

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" 
      }] 
      } 
      }] 
     }

ИМИДЖ ДЛЯ ВЕДЕНИЯ

HTML-код имеет в нем данные. По сути, данные из html-файла должны быть удалены и поступать только из json. По данным я имею в виду текстовые значения, появляющиеся на странице. например, abc. Это не должно быть, abc должен исходить от json.

Таким образом, div MyMainSavings соответствует объекту MyMainSavings в json, тогда MyMainSavingsTop div соответствует MyMainSavingsTop в json, поэтому я хочу заполнить данные в соответствующем элементе div через javascript/jquery. Короче элементы того же имени должны найти себя в html-файле.

источник

2016-01-05 Jaideep

Вы пробовали что-нибудь для достижения этого? не – Rayon

В настоящее время нет я нету ... Но у меня есть идея, которая заключается в следующем mainObject.Main [0] .I_Have [0] .MyMainSavings.MyMainSavingsTop для (вар я в mainObject.Main [0]) console.log (i); > I_Have для (var i in mainObject.Main [0] .I_Have [0]) console.log (i); MyMainSavings – Jaideep

Реализуйте эту идею прежде, чем просить сделать это за вас .. – Rayon

Хорошо, позвольте мне дать вам краткое представление, так что вы можете начать и затем спросить дальше:

создать функцию в сценарии и использовать AJAX для вызова файла данных, например.

function get_data() { var eurl = '' ваш url '; $ .ajax ({ типа: "GET", URL: EURL, DATATYPE: "JSON", асинхронной: правда, успех: функция (данные) { если (data.text) { вар JSONa = JSON.parse (data.text); } еще { вар JSONa = данные; }

2.you теперь есть данные, так что вы можете цикл через него, например,

var emi = JSONa.response[0].data.options; 
$.each(emi, function(key,value){});

Попробуйте распечатать свой цикл использования json и используйте его, поскольку у вас есть те же имена в html, чтобы вы могли попробовать использовать ключи данных в качестве селекторов и добавить в него соответствующее значение ключа.

не забудьте вызвать функцию в конце.

get_data();

Надеюсь, это поможет вам начать работу с этого момента.

Спасибо!

источник

2016-01-05 13:01:33 kshitij

да, это поможет ... Спасибо – Jaideep

Не могли бы вы рассказать о третьем вопросе, пожалуйста ... – Jaideep

это означает, что у вас есть общие имена в html-классе и то же самое в json, поэтому вместо ручного написания селекторов и добавления значения в html вы можете: 1. использовать ключи в качестве селекторов jquery и добавлять в него значения как данные, чтобы автоматизировать ваш процесс – kshitij

Синтаксического этот JSON в яваскрипт переменного, как показано ниже:

var json = jQuery.parseJSON(data);

И, с помощью JQuery.каждую функцию вы можете выполнить, как показано ниже:

jQuery.each(json.Main, function(idx, obj) { 
    jQuery.each(obj.I_Have, function(idx1, obj1) { 
      jQuery.each(obj1.MyMainSavings, function(idx2, obj2) { 
        jQuery.each(obj2.MyMainSavingsTop, function(idx3, obj3) {  $("table .MyMainSavingsTop tr").val(obj3.AccountName); 

        }); 
      }); 

    }); 

    });

Вы можете повторить то же самое и для других элементов.

источник

2016-01-05 13:02:51

Спасибо большое ... – Jaideep

Можете ли вы объяснить, как я должен загружать внешний json-файл с использованием ajax? – Jaideep

Это зависит от того, откуда вы получаете свой JSON. Обычно jQuery.ajax() - это все, что требуется для получения json из внешней службы. –

Указание объектов JSON на соответствующие HTML-divs

ответ

Смежные вопросы