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

我的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元素中的数据显示每个点，您可以使用这些数据帮助您完成任务：

(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);
    }
})()

HTML:

结果:

你可以测试一下

如果您想要标题，标题。。。。。只需调整html文件即可。当前代码（或特定问题）是。。？（可能：搜索“javascript图表库”。）

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

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" }
  
  ]
});