如何将 JSON 数据添加到卡片并显示给最终用户

Question

var SendInfo = {
  "dataKey": "1013"
};
console.log(SendInfo);

$.ajax({
  type: 'post',
  url: 'http://34.201.147.118:3001/getData',
  data: JSON.stringify(SendInfo),
  contentType: "application/json",
  traditional: true,
  success: function(data) {
    console.log(data);
    //console.log(Data[0]);
    var x = $("p:nth-child(0)").append(data[0]);
    console.log(x);

  }
});

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="container" id="101">
    <h4><b>AcquiringDivision</b></h4>
    <p></p>
  </div>
</div>

在成功函数中，我想将控制台中的所有数据添加到我创建的卡中，但我遇到了一些错误，这是我在控制台中获得的 JSON 数据。

如何使用 jQuery 向我的卡片添加数据？

{Data: {…}}
Data:
AcquiringDivision:""
EndDate:"20-05-2019"
Excl:"yes"
Format:"mp4"
Language:"English"
 Media:""
Owner:"bb"
ProductID:"1013"
StartDate:"20-05-2018"

Answer 1

由于数据{Data: {…}}是Object，所以你不应该将它用作Array data[0]。

数据的结构是{Data: value}，所以你应该通过var realData = data.Data;检索Data

    $.ajax({
        type: 'post',
        url: 'http://34.201.147.118:3001/getData',
        data: JSON.stringify(SendInfo),
        contentType: "application/json",
        traditional: true,
        success: function (data) {
            console.log(data);
            var realData = data.Data;
            console.log(realData);
            setData(realData);

        }
    });

添加数据可以使用jQuery，下面是例子：

function setData(data){
    $('.card b').text(data.AcquiringDivision);
    // ...and so on    
}

Answer 2

据我所知。您可以使用handlebars.js 来实现这一点。 我举了一个不同的例子，它也适用于你的情况

Handlebars.js

车把模板

 <script id="some-template" type="text/x-handlebars-template"> 
 {{#data}} 
<div class="card">
 <div class="container" id="101">
 <h4><b>AcquiringDivision</b></h4>
   <p>{{AcquiringDivision}}</p>
 <h4><b>End Date</b></h4>
   <p>{{EndDate}}</p>
 <h4><b>Excel</b></h4>
   <p>{{Excl}}</p>
  </div>
</div>
 {{/data}} 
</script>

JS

  var source = $("#some-template").html(); 
  var template = Handlebars.compile(source); 

 var data = { 
   data: [
        {
         AcquiringDivision:"",
         EndDate:"20-05-2019",
         Excl:"yes",
         Format:"mp4",
         Language:"English",
         Media:"",
         Owner:"bb",
         ProductID:"1013",
         StartDate:"20-05-2018"}
         ]
       }; 


 $('body').append(template(data));

JSFiddle