Question

我正在尝试使用jquery从json文件中获取数据，但似乎无效我想只得到几天，如果我点击一天，我会得到当天的所有数据例如：
日：1，日：2

如果我点击第1天，我会在第1天获得所有信息

matchs 
date : monday, lieu : toronto, hotel : hotel 1
date : friday, lieu : london, hotel : hotel 2
date : sunday, lieu : New York, hotel : hotel 3

我的json文件是

{ 
"cart":[
    {
    "day" : 1,
        "matchs"  : [
        { "id"         : 1000,
          "date"       : "monday",
          "lieu"       : "toronto",
          "hotel"       : "hotel 1",

        },
        { "id"       : 1005,
          "date"       : "friday",
          "lieu"       : "london",
          "hotel"       : "hotel 2",
        },
        { "id"       : 1015,
          "date"       : "sunday",
          "lieu"       : "new york",
          "hotel"       : "hotel 3",
        }
  ]},

  {"day" : 2,
  "matchs"  : [
    { "id"         : 1100,
      "date"       : "monday",
      "lieu"       : "amsterdam",
      "hotel"       : "hotel 20",
    },
    { "id"       : 1105,
      "date"       : "tuesday",
      "lieu"       : "ottawa",
      "hotel"       : "hotel 30",
    },
     { "id"       : 1115,
       "date"       : "saturday",
      "lieu"       : "madrid",
      "hotel"       : "hotel 40",
    }
  ]
}
]}

我的HTML代码是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lecture et parsing d'un fichier JSON</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <button id="lecture">Lancer la lecture</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#lecture').on('click', function(){
          $.getJSON('match.json',function(data){
            $.each(data,function(index,d){
              $('#zone').append('Journee : ' + d.day + '<br>');
            });
          });
        });
      });
    </script>
  </body>
</html>

我收到此错误

jquery.min.js:2 jQuery.Deferred exception: $.getJSON(...).error is not a function TypeError: $.getJSON(...).error is not a function
    at HTMLDocument.<anonymous> (file:///C:/Users/Ethernet/Desktop/15619-PICS-Final-E17/test3.html:16:12)
    at j (file:///C:/Users/Ethernet/Desktop/15619-PICS-Final-E17/jquery.min.js:2:29999)
    at k (file:///C:/Users/Ethernet/Desktop/15619-PICS-Final-E17/jquery.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $.getJSON(...).error is not a function
    at HTMLDocument.<anonymous> (test3.html:16)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

Answer 1

您的JSON文件已损坏。在一些验证器中尝试查看错误（即https://jsonformatter.curiousconcept.com/）

要修复您的JSON，请删除对象内最后一行的逗号（在“hotel 1”之后等）

看起来像：

{
"cart":[
    {
    "day" : 1,
        "matchs"  : [
        { "id"         : 1000,
          "date"       : "monday",
          "lieu"       : "toronto",
          "hotel"       : "hotel 1"

        },
        { "id"       : 1005,
          "date"       : "friday",
          "lieu"       : "london",
          "hotel"       : "hotel 2"
        },
        { "id"       : 1015,
          "date"       : "sunday",
          "lieu"       : "new york",
          "hotel"       : "hotel 3"
        }
  ]},

  {"day" : 2,
  "matchs"  : [
    { "id"         : 1100,
      "date"       : "monday",
      "lieu"       : "amsterdam",
      "hotel"       : "hotel 20"
    },
    { "id"       : 1105,
      "date"       : "tuesday",
      "lieu"       : "ottawa",
      "hotel"       : "hotel 30"
    },
     { "id"       : 1115,
       "date"       : "saturday",
      "lieu"       : "madrid",
      "hotel"       : "hotel 40"
    }
  ]
}
]}

要访问JSON中的数据，请使用以下表示法：

$('#zone').append('Journee : ' + data.cart[0].matchs[0].date + '<br>');

Answer 2

var json = '{"cart": [{"day": 1,"matchs": [{"id": 1000,"date": "monday","lieu": "toronto","hotel": "hotel 1"},{"id": 1005,"date": "friday","lieu": "london","hotel": "hotel 2"},{"id": 1015,"date": "sunday","lieu": "new york","hotel": "hotel 3"}]},{"day": 2,"matchs": [{"id": 1100,"date": "monday","lieu": "amsterdam","hotel": "hotel 20"},{"id": 1105,"date": "tuesday","lieu": "ottawa","hotel": "hotel 30"},{"id": 1115,"date": "saturday","lieu": "madrid","hotel": "hotel 40"}]}]}';
var obj = jQuery.parseJSON(json)
 $.each(obj, function (index, value) {
   $.each(value, function (index, value) {
       var btn = $('<button/>', {
                 text: 'Day' + value.day.toString(),
                 class: 'btn',
                 type: 'button',
                 value: value.day.toString(),
                 css: { margin: '10px' }
                });
        $('#element').append(btn)
    });
 });
$('.btn').on('click', function () {
   var ThisVal = $(this).val();
   var DataHtml="";
   $.each(obj, function (index, value) {
       $.each(value, function (index, value) {
         if (value.day == ThisVal) {
            $.each(value.matchs, function (index, value) {
                  DataHtml += "<div ><b>id: " + value.id + " </b>" +
                               "<span>date: " + value.date + " </span>" +
                               "<span>lieu: " + value.lieu + " </span>" +
                               "<span>hotel: " + value.hotel + " </span></div><br>";
             });
          };
        });
    });
$('#Result').html(DataHtml);
});

#element,#Result {
   margin:10px 20px;
}
#Result span {
   min-width: 120px;
   border: solid 1px #ccc;
   display: inline-block;
   text-align: center;
   padding: 3px;
 }
#Result b {
   color: #fff;;
   background-color:darksalmon;
   display: inline-block;
   text-align: center;
   padding: 3px;
}

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

从json jquery获取数据

2 个答案: