如何使用AJAX显示数据？ [英] how to display data by using AJAX?

问题描述

大家好我是ajax面对一个问题我希望将这些数据显示为html中的表格如何提取这些数据并以html表格形式显示它只是一个虚拟数据，否则它有很多对象加上嵌套对象请帮帮我。

Hi everyone I am a facing one issue in ajax I want to display this data as a table in html how can I extract this data and display it in html table form it is a just dummy data otherwise it have lots of object plus nested object please help me.

JSON DATA：

JSON DATA:

{
    "FullName":"shahrushabh",
    "description":"this is demo person register",  
    "Address1":"b\/1",
    "Area":"Sabarmati",
    "status":"active",
    "Thumb":"0",
    "checkbox":
    [
        {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
        {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
    ]
}

AJAX代码：

   <script>
       $(document).ready(function(){
           $.ajax({
            url:"<?php echo base_url()?>index.php/myad",
            type: 'GET',
            dataType:'json',
            success: function(data){
              var jsonobject = jQuery.parseJSON(data);
              alert("hi");
              $.each(jsonobject, function(key, value){
                console.log(value.FullName);
                $.each(value.checkbox , function(k, val){
                  console.log(val);
                })
              })
            }
           });
       });
    </script>

推荐答案

我假设你的问题是你有嵌套对象，下面的代码是将每个用于嵌套对象。

I assumed from your question is you have nested object, below code is to use each for nested object.

//Main loop
$.each(jsonObject, function(key, value){
  console.log(value.FullName);
  //Inner loop for check box for each user
  $.each(value.checkbox, function(k, val){
    console.log(val);
  })
});

请确保您已阅读使用前的每个（）官方。

编辑

在迭代之前检查响应是不是数组。

Check response is an array or not before iteration.

if (!$.isArray(jsonObject)) {
    jsonObject = [jsonObject];
}

$.each(jsonObject, function(key, value){
  console.log("FULL NAME " + value.FullName);
  $.each(value.checkbox, function(k, val){
    console.log("ID" + " " + val.ID);
  });
});

var jsonObject = [
    {
      "FullName":"shahrushabh",
      "description":"this is demo person register",  
      "Address1":"b\/1",
      "Area":"Sabarmati",
      "status":"active",
      "Thumb":"0",
      "checkbox":
      [
          {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
          {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
      ]
    },
    {
      "FullName":"shahrushabh",
      "description":"this is demo person register",  
      "Address1":"b\/1",
      "Area":"Sabarmati",
      "status":"active",
      "Thumb":"0",
      "checkbox":
      [
        {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
        {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
      ]
    }
 ];

//console.log(jsonObject);
$.each(jsonObject, function(key, value){
  console.log(value.FullName);
  $.each(value.checkbox, function(k, val){
    console.log(val);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这篇关于如何使用AJAX显示数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！