W3.JS HTML डेटा प्रदर्शित करें
HTML में डेटा प्रदर्शित करें:
w3.displayObject(selector)
प्रयोग करने में आसान
अपने डेटा के लिए स्थान आरक्षित करने के लिए बस किसी भी HTML तत्व में कोष्ठक {{}} जोड़ें:
उदाहरण
<div id="id01">
{{firstName}} {{lastName}}
</div>
अंत में अपने एचटीएमएल में डेटा प्रदर्शित करने के लिए w3.displayObject पर कॉल करें:
उदाहरण
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
पहला पैरामीटर उपयोग करने के लिए HTML तत्व की आईडी है (id01)।
दूसरा पैरामीटर प्रदर्शित करने के लिए डेटा ऑब्जेक्ट है (myObject)।
एक बड़ी वस्तु प्रदर्शित करना
W3.JS की शक्ति को प्रदर्शित करने के लिए, हम एक बड़ा JavaScript ऑब्जेक्ट (myObject) प्रदर्शित करेंगे।
ऑब्जेक्ट CustomerName, शहर और देश के गुणों के साथ ग्राहकों की वस्तुओं की एक सरणी है:
मायऑब्जेक्ट
var myObject = {"customers":[
{"CustomerName":"Alfreds
Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Blauer See
Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar
Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}
]};
एक ड्रॉपडाउन भरना
उदाहरण
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
एक सूची भरना
उदाहरण
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
w3.displayObject को w3.includeHTML के साथ संयोजित करना
जब आप किसी वेब पेज में HTML स्निपेट शामिल करते हैं, तो आपको यह सुनिश्चित करना होगा कि HTML के ठीक से शामिल होने से पहले शामिल किए गए HTML पर निर्भर अन्य फ़ंक्शन निष्पादित न हों।
कोड को "होल्ड बैक" करने का सबसे आसान तरीका इसे कॉलबैक फ़ंक्शन में रखना है।
एक कॉलबैक फ़ंक्शन को w3.includeHTML() के तर्क के रूप में जोड़ा जा सकता है:
उदाहरण
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
चेक बॉक्स भरना
उदाहरण
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
फिलिंग क्लासेस
उदाहरण
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
एक टेबल भरना
उदाहरण
<table id="id01">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
एक <चयन> तत्व भरना
उदाहरण
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>