如何在JavaScript中將JSON數據附加到HTML？

Question

我使用JSON數組獲取了一些數據。 我想將每個數據附加到div中。 但是我不明白這是怎么回事？

控制者

   function get_performers()
   {
    $id = $this->input->post('id'); 
    $exam = $this->input->post('exam'); 
    $datas=$this->job->get_top_ten_st_data($id,$exam);
    $out['student_details'] = $datas;
     echo json_encode($out); 
   }

腳本

function get_performers(id,exam)
{

    $.ajax({
        url:"<? echo base_url();?>class_analysis/get_performers", 
        dataType: 'json',
        type: "POST",
        data: {id:id,exam:exam},      
        success:function(result) {  
            // alert("haii");
            console.log(result);
            result = JSON.parse(result);

          var tab= "<div class='col-xs-2 blk-ht'>  <span class='hd'>Names</span> </div>";
           for(var i=0;i<result.student_details.length;i++)
            {

                 tab=tab+"<div class='col-ds-1'><span class='subjNames'>" + result.student_details[i]["subject_name"]+ "</span></div> ";
            }   

           jQuery("#subjectNames").append(tab);

        }
    }); 
}

有什么問題嗎？

Answer 1

嘗試html不附加

  jQuery("#subjectNames").html(tab);

另外，如果jQuery("#subjectNames")在控制台中等於null ，則意味着您沒有HTML中帶有id="subjectNames"元素，而不是id="#subjectNames"或其他id="#subjectNames" 。 可能是您使用類，然后嘗試使用$(".subjectNames") . 不是#

Answer 2

循環應該工作...結果似乎是另一個問題。

 var tab= "<div class='col-xs-2 blk-ht'><span class='hd'>Names</span> </div>"; for(var i=0;i<20;i++) { tab=tab+"<div class='col-ds-1'><span class='subjNames'>" + "test: " + i + "</span></div> "; } jQuery("#subjectNames").append(tab); 

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

Answer 3

$ .ajax選項中的dataType：'json'-自動解析您的json

和使用JQUERY）））

成功的AJAX功能

$.each( result.student_details, function( key, value ) {
      alert( key + ": " + value );
});

Answer 4

<?php 
function get_performers()
{
    $id = $this->input->post('id'); 
    $exam = $this->input->post('exam'); 
    $datas=$this->job->get_top_ten_st_data($id,$exam);
    $out['student_details'] = $datas;
    echo json_encode($out); 
}
?>
<script>
$.ajax({
    url:"<? echo base_url();?>class_analysis/get_performers", 
    dataType: 'json',
    type: "POST",
    data: {id:id,exam:exam},      
    success:function(result) {

        $.each(response.student_details, function(key,value){
             appendHtml(key,value);
        });


    }
}); 

function appendHtml(key,value)
{
    var tab= "<div class='col-xs-2 blk-ht'>  <span class='hd'>Names</span> </div>";
    tab = tab+"<div class='col-ds-1'><span class='subjNames'>" +value+ "</span></div> ";
    jQuery("#subjectNames").append(tab);
}

</script>