从JSON jQuery获取数据

Question

I'm trying to get data from json file using jquery but it seems is not working i want to get only days and if I click on a day i get the all data of that day example : 我正在尝试使用jquery从json文件中获取数据，但似乎不起作用，我只想获取几天，如果我单击某天，我将获得该天的所有数据，例如：
day : 1 , day : 2 天：1，天：2

If i click day 1 I get all info in day 1 如果我单击第一天，我将在第一天获得所有信息

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

my json file is 我的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",
    }
  ]
}
]}

my html code is 我的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>

I'm getting this error 我收到这个错误

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

Your JSON file is corrupted. 您的JSON文件已损坏。 Try it in some validator to see errors (ie https://jsonformatter.curiousconcept.com/ ) 在某些验证器中尝试以查看错误（即https://jsonformatter.curiousconcept.com/ ）

To repair your JSON, delete the commas on the last lines inside the objects (after "hotel 1" etc) 要修复JSON，请删除对象内最后一行的逗号（“ hotel 1”等之后）

It will look like: 它看起来像：

{
"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"
    }
  ]
}
]}

To access data inside JSON use this notation: 要在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 个解决方案

解决方案1
1 2017-07-18 20:47:56

解决方案2
1 2017-07-18 21:08:23

从JSON jQuery获取数据

问题描述

2 个解决方案

解决方案1 1 2017-07-18 20:47:56

解决方案2 1 2017-07-18 21:08:23

解决方案1
1 2017-07-18 20:47:56

解决方案2
1 2017-07-18 21:08:23