JSON HTML

JSON ma'lumotlarini JavaScript-ga o'tkazish juda oson. O'z navbatida, JavaScript yordamida veb-sahifalaringizda HTML elementlarini yaratishingiz mumkin.

---

HTML jadvali (Table)

JSON sifatida qabul qilingan ma'lumotlardan HTML jadvalini yarating:

Misol

const dbParam = JSON.stringify({ table: 'customers', limit: 20 })
const xmlhttp = new XMLHttpRequest()
xmlhttp.onload = function () {
  const myObj = JSON.parse(this.responseText)
  let text = "<table border='1'>"
  for (let x in myObj) {
    text += '<tr><td>' + myObj[x].name + '</td></tr>'
  }
  text += '</table>'
  document.getElementById('demo').innerHTML = text
}
xmlhttp.open('POST', 'json_demo_html_table.php')
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xmlhttp.send('x=' + dbParam)

---

Dinamik HTML jadvali

Aylantiriladigan (drop-down) menyu qiymatiga asoslangan holda HTML jadvalini yarating:

<select id="myselect" onchange="change_myselect(this.value)">
  <option value="">Variantni tanlang:</option>
  <option value="customers">Mijozlar</option>
  <option value="products">Mahsulotlar</option>
  <option value="suppliers">Yetkazib beruvchilar</option>
</select>

<div id="demo"></div>

<script>
  function change_myselect(sel) {
    const dbParam = JSON.stringify({ table: sel, limit: 20 })
    const xmlhttp = new XMLHttpRequest()
    xmlhttp.onload = function () {
      const myObj = JSON.parse(this.responseText)
      let text = "<table border='1'>"
      for (let x in myObj) {
        text += '<tr><td>' + myObj[x].name + '</td></tr>'
      }
      text += '</table>'
      document.getElementById('demo').innerHTML = text
    }
    xmlhttp.open('POST', 'json_demo_html_table.php')
    xmlhttp.setRequestHeader(
      'Content-type',
      'application/x-www-form-urlencoded'
    )
    xmlhttp.send('x=' + dbParam)
  }
</script>

---

HTML tanlov ro'yxati (Drop Down List)

JSON sifatida qabul qilingan ma'lumotlardan HTML tanlov ro'yxatini (<select>) yarating:

Misol

const dbParam = JSON.stringify({ table: 'customers', limit: 20 })
const xmlhttp = new XMLHttpRequest()
xmlhttp.onload = function () {
  const myObj = JSON.parse(this.responseText)
  let text = '<select>'
  for (let x in myObj) {
    text += '<option>' + myObj[x].name + '</option>'
  }
  text += '</select>'
  document.getElementById('demo').innerHTML = text
}
xmlhttp.open('POST', 'json_demo_html_table.php')
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xmlhttp.send('x=' + dbParam)