从json jquery获取数据

-1

我想从jQuery文件中获取数据使用jquery，但它似乎不工作我想只得到几天，如果我点击一天，我得到当天的所有数据示例：
日：1天：2从json jquery获取数据

如果我点击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)

来源

2017-07-18 Bynd

尝试改变d.day到d.matchs.date –

我改变它，但我发现这个错误 jQuery的1.10.2.js：8706的XMLHttpRequest无法加载文件：/// C：/用户/Ethernet/Desktop/15619-PICS-Final-E17/matches.json。协议方案仅支持跨源请求：http，data，chrome，chrome-extension，https。发送\t @ \t jquery-1.10.2.js：8706 – Bynd

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

要修复您的JSON，删除的对象中的最后一行逗号（“酒店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>');

来源

2017-07-18 20:47:56

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>

来源

2017-07-18 21:08:23

从json jquery获取数据

回答

相关问题