मैं एक JSON फ़ाइल के साथ names.json नामित किया है:JSON + जावास्क्रिप्ट/jQuery। एक जेएसएस फ़ाइल से डेटा कैसे आयात करें और इसे पार्स करें?
{"employees":[
{"firstName":"Anna","lastName":"Meyers"},
{"firstName":"Betty","lastName":"Layers"},
{"firstName":"Carl","lastName":"Louis"},
]}
मैं जावास्क्रिप्ट में अपनी सामग्री का उपयोग कैसे कर सकते हैं?
एक उदाहरण कैसे करना है यह हो सकता है की जाँच करें:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON('names.json',function(data){
console.log('success');
$.each(data.employees,function(i,emp){
$('ul').append('<li>'+emp.firstName+' '+emp.lastName+'</li>');
});
}).error(function(){
console.log('error');
});
});
</script>
</head>
<body>
<ul></ul>
</body>
</html>
jQuery कोड में, आपके पास employees संपत्ति होनी चाहिए।
data.employees[0].firstName
तो यह ऐसा होगा।
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.getJSON("names.json", function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
});
</script>
</body>
</html>
बेशक आपको गैर jQuery संस्करण के लिए भी उस संपत्ति की आवश्यकता होगी, लेकिन आपको पहले JSON प्रतिक्रिया को पार्स करना होगा।
यह भी ध्यान रखें कि document.write आपके पूरे पृष्ठ को नष्ट कर रहा है।
आप अभी भी समस्या हो रही है, $.getJSON आवरण के बजाय पूर्ण $.ajax अनुरोध की कोशिश करो।
$.ajax({
url: "names.json",
dataType: "json",
success: function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERROR', textStatus, errorThrown);
}
});
हाय क्लिफ, अभी भी मेरे लिए काम नहीं कर रहे हैं। क्या आप पूरा कोड पोस्ट कर सकते हैं? लिपि सिर में थी, लेकिन अब शरीर में है और काम नहीं किया। =/ – GarouDan
@ गारौदान: सुनिश्चित नहीं है कि आपका क्या मतलब है जब आप कहते हैं कि यह काम नहीं करता है। क्या कॉलबैक बिल्कुल आह्वान किया गया है? क्या आपको कंसोल में कोई त्रुटि मिल रही है? –
आप PHP उपयोग करना चाहते हैं।
<?php
$contents = file_get_contents('names.json');
?>
<script>
var names = <?php echo $contents; ?>
var obj = JSON.parse(names);
//use obj
</script>
वैकल्पिक रूप से, यह async का उपयोग करें:
<script>
$(document).ready(function(){
$.get("get_json.php?file=names",function(obj){
//use obj here
},'json');
});
</script>
पीएचपी:
<?php
$filename = $_GET['file'] . '.json';
$data['contents'] = file_get_contents($filename);
echo json_encode($data);
?>
फ़ाइल में पहले से ही जेसन है, क्यों json_encode पहले से ही जेसन क्या है? वह सिर्फ नाम प्राप्त कर सकता था।आखिरी PHP रैपर के बिना सीधे जेसन। – ccKep
दिलचस्प समाधान xbonez। मैं jQuery ई जावास्क्रिप्ट का उपयोग करके थोड़ा सा प्रयास करूंगा, लेकिन शायद यह मेरी समस्या को भी हल करेगा। – GarouDan
thx xbonez, मैं भी इस समाधान को ध्यान में रखूंगा। – GarouDan
आपका JSON फ़ाइल मान्य JSON शामिल नहीं है। इसके बजाए निम्नलिखित आज़माएं।
{
"employees":
[
{
"firstName": "Anna",
"lastName": "Meyers"
},
{
"firstName": "Betty",
"lastName": "Layers"
},
{
"firstName": "Carl",
"lastName": "Louis"
}
]
}
आपको तब एक प्रतिक्रिया दिखाई देनी चाहिए। http://jsonlint.com/
ओह। हाँ। अब ^^ काम करता है। बहुत बहुत धन्यवाद। मुझे बात थी कि समस्या jquery कोड में है। – GarouDan
+1 अमान्य JSON मेरे सिर पर सही चला गया। –
आप बस कि एक चर के रूप में अपने JSON ऑब्जेक्ट वाणी अपने HTML में एक जावास्क्रिप्ट फ़ाइल को शामिल कर सकते हैं। फिर उदाहरण के लिए, data.employees का उपयोग करके आप अपने JSON डेटा को अपने वैश्विक जावास्क्रिप्ट स्कोप से एक्सेस कर सकते हैं।
index.html:
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js:
var data = {
"employees": [{
"firstName": "Anna",
"lastName": "Meyers"
}, {
"firstName": "Betty",
"lastName": "Layers"
}, {
"firstName": "Carl",
"lastName": "Louis"
}]
}
आपको इस कथन को डेटा.जेएस फ़ाइल में जोड़ने की जरूरत है: "" मॉड्यूल.एक्सपोर्ट = डेटा; "" " अन्यथा आप data.js के माध्यम से किसी भी अन्य फ़ाइल में डेटा परिवर्तनीय मान आयात करने में सक्षम नहीं होंगे। –
मैं सवाल बदल गया था और त्रुटियों को सुधारा। अब मुझे लगता है कि यह अपवॉट प्राप्त कर सकता है और अन्य लोगों के लिए एक अच्छा संदर्भ होगा। – GarouDan