在 asp.net mvc 中使用 ajax 显示复杂的 JSON 数据答案

【问题标题】：Displaying Complex JSON data using ajax in asp.net mvc在 asp.net mvc 中使用 ajax 显示复杂的 JSON 数据
【发布时间】：2020-11-29 15:05:15
【问题描述】：

我的 ajax 函数中有这个 JSON 数据

[
  {
    "Point": "Point1",
    "Picture": "~/Images/PointPicuters/63732413181952695092b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
    "ReadingList": [
      {
        "MeterReading": 1377.00,
        "fuel": "Desail"
      },
      {
        "MeterReading": 860.00,
        "fuel": "Petrol_95"
      }
    ]
  },
  {
    "Point": "Point2",
    "Picture": "~/Images/PointPicuters/637324131917954300a.png",
    "ReadingList": [
      {
        "MeterReading": 1454.00,
        "fuel": "Petrol_95"
      }
    ]
  },
  {
    "Point": "Point3",
    "Picture": "~/Images/PointPicuters/637324131996312029a.png",
    "ReadingList": [
      {
        "MeterReading": 732.00,
        "fuel": "Petrol_95"
      }
    ]
  },
  {
    "Point": "point4",
    "Picture": "~/Images/PointPicuters/637324132089900045aeafb6ed4e4da99584c3eaa085976b65_medium.jpg",
    "ReadingList": [
      {
        "MeterReading": 677.00,
        "fuel": "Petrol"
      },
      {
        "MeterReading": 6666.00,
        "fuel": "GasLocal"
      }
    ]
  },
  {
    "Point": "point5",
    "Picture": "~/Images/PointPicuters/63732413217155094892b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
    "ReadingList": [
      {
        "MeterReading": 677.00,
        "fuel": "Petrol"
      },
      {
        "MeterReading": 6666.00,
        "fuel": "LPG"
      },
      {
        "MeterReading": 677.00,
        "fuel": "GasLocal"
      }
    ]
  }
]

我试图用不同的 HTML 元素中的数据显示每个点

【问题讨论】：

好的。当前代码（或特定问题）是..？（也许：搜索“javascript charting library”。）

标签： json ajax asp.net-mvc-5

【解决方案1】：

(function(){
    var dataJson = [{"Point":"Point1","Picture":"~/Images/PointPicuters/63732413181952695092b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg","ReadingList":[{"MeterReading":1377.00,"fuel":"Desail"},{"MeterReading":860.00,"fuel":"Petrol_95"}]},{"Point":"Point2","Picture":"~/Images/PointPicuters/637324131917954300a.png","ReadingList":[{"MeterReading":1454.00,"fuel":"Petrol_95"}]},{"Point":"Point3","Picture":"~/Images/PointPicuters/637324131996312029a.png","ReadingList":[{"MeterReading":732.00,"fuel":"Petrol_95"}]},{"Point":"point4","Picture":"~/Images/PointPicuters/637324132089900045aeafb6ed4e4da99584c3eaa085976b65_medium.jpg","ReadingList":[{"MeterReading":677.00,"fuel":"Petrol"},{"MeterReading":6666.00,"fuel":"GasLocal"}]},{"Point":"point5","Picture":"~/Images/PointPicuters/63732413217155094892b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg","ReadingList":[{"MeterReading":677.00,"fuel":"Petrol"},{"MeterReading":6666.00,"fuel":"LPG"},{"MeterReading":677.00,"fuel":"GasLocal"}]}];
    
    var e_list = document.getElementById("myList");
    
    for (var i in dataJson) {
        console.info(dataJson[i].Point);
        var node = document.createElement("li");
        var textPoint = document.createTextNode(dataJson[i].Point);        
        var img = document.createElement('img');  
        img.src = dataJson[i].Picture;  
        node.appendChild(textPoint);
        node.appendChild(img);
        
        var list = document.createElement("ul");        
        for (var j in dataJson[i].ReadingList) {
            var nodeChild = document.createElement("li");
            var textPointChild1 = document.createTextNode(dataJson[i].ReadingList[j].MeterReading);
            nodeChild.appendChild(textPointChild1);
            var textPointChild2 = document.createTextNode(dataJson[i].ReadingList[j].fuel);
            nodeChild.appendChild(textPointChild2);
            list.appendChild(nodeChild);
        }   
         
        node.appendChild(list);
        e_list.appendChild(node);
    }
})()

【讨论】：

【解决方案2】：

您可以使用DataTable 来帮助您完成任务：

HTML：

<h3>Table</h3>
<table id="data_table">
</table>

JavaScript：

var json_data = {
  json: JSON.stringify({
    "data": [
  {
    "Point": "Point1",
    "Picture": "~/Images/PointPicuters/63732413181952695092b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
    "ReadingList": [
      {
        "MeterReading": 1377,
        "fuel": "Desail"
      },
      {
        "MeterReading": 860,
        "fuel": "Petrol_95"
      }
    ]
  },
  {
    "Point": "Point2",
    "Picture": "~/Images/PointPicuters/637324131917954300a.png",
    "ReadingList": [
      {
        "MeterReading": 1454,
        "fuel": "Petrol_95"
      }
    ]
  },
  {
    "Point": "Point3",
    "Picture": "~/Images/PointPicuters/637324131996312029a.png",
    "ReadingList": [
      {
        "MeterReading": 732,
        "fuel": "Petrol_95"
      }
    ]
  },
  {
    "Point": "point4",
    "Picture": "~/Images/PointPicuters/637324132089900045aeafb6ed4e4da99584c3eaa085976b65_medium.jpg",
    "ReadingList": [
      {
        "MeterReading": 677,
        "fuel": "Petrol"
      },
      {
        "MeterReading": 6666,
        "fuel": "GasLocal"
      }
    ]
  },
  {
    "Point": "point5",
    "Picture": "~/Images/PointPicuters/63732413217155094892b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
    "ReadingList": [
      {
        "MeterReading": 677,
        "fuel": "Petrol"
      },
      {
        "MeterReading": 6666,
        "fuel": "LPG"
      },
      {
        "MeterReading": 677,
        "fuel": "GasLocal"
      }
    ]
  }
]
  }),
  "delay": 2
};

var table = $('#data_table').DataTable({
  ajax: {
    type: 'POST',
    url: '/echo/json/',
    data: json_data
  },
  columns: [
            { "data": "Point" },
            { "data": "Picture" },
            { "data": "ReadingList[].MeterReading" },
            { "data": "ReadingList[].fuel" }
  
  ]
});

结果：

你可以测试there

如果你想要标题，标题.....只需调整你的 html 文件

【讨论】：