मैं जावास्क्रिप्ट से स्क्रिप्ट-टैग में JSON कैसे पढ़ सकता हूं?

83

मेरे पास एक गतिशील रूप से उत्पन्न पृष्ठ है जहां मैं एक स्थिर जावास्क्रिप्ट का उपयोग करना चाहता हूं और इसे एक पैरामीटर के रूप में JSON स्ट्रिंग पास करता हूं। मैंने Google द्वारा उपयोग किए गए इस दृष्टिकोण को देखा है ( Google के +1 बटन देखें: वे इसे कैसे करते हैं? )।

लेकिन मुझे जावास्क्रिप्ट से JSON स्ट्रिंग कैसे पढ़ना चाहिए?

<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
  </head>
  <body>
    Hello
  </body>
</html>

इस जावास्क्रिप्ट में, मैं {"org": 10, "items":["one","two"]}HTML दस्तावेज़ से JSON तर्क का उपयोग करना चाहूंगा । मुझे नहीं पता कि यह jQuery के साथ या इसके बिना करना सबसे अच्छा है।

$(function() {
    // read JSON

    alert("the json is:")
})

javascript json script-tag

— जोनास
स्रोत

164

मैं इसके लिए स्क्रिप्ट घोषणा को बदलूंगा:

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

नोट प्रकार और आईडी फ़ील्ड। उसके बाद

var data = JSON.parse(document.getElementById('data').innerHTML);

सभी ब्राउज़रों में ठीक काम करेगा।

type="application/json"लोड करते समय यह पार्स करने से ब्राउज़र को रोकने के लिए की जरूरत है।

— सी मुस्कान
स्रोत

खैर, मैं स्क्रिप्ट-टैग बिंदु को जावास्क्रिप्ट के लिए चाहता हूं, इसलिए यह केवल JSON के लिए नहीं है। JSON केवल स्क्रिप्ट का एक तर्क है।

— जोनास

4

HTML5 कल्पना के अनुसार: dev.w3.org/html5/markup/script.html जिस <script>तत्व ने SRC को परिभाषित किया है , उसमें नई लाइनों और / या टिप्पणियों के अलावा कुछ नहीं होगा। उपरोक्त लिंक में "एक src विशेषता वाले स्क्रिप्ट तत्व को केवल होना चाहिए:" देखें। अन्यथा HTML सत्यापनकर्ता शिकायत करेगा।

— सी-स्माइल

12

@WoIIe क्योंकि jQuery टीएस द्वारा पहले से ही उपयोग किया जाता है, <script src="jquery-1.6.2.min.js"></script>वहां देखें।

— सी-स्माइल

मुझे jquery का उपयोग पसंद है। मेरा मतलब है, वेनिला जावास्क्रिप्ट (इस मामले में) का उपयोग करके एक मिलीसेकंड के कितने और अंशों को काट दिया जाएगा?

— कप्तान हाइपरटेक्स्ट

1

ध्यान दें कि यह सुरक्षित नहीं है, यह XSS, codepen.io/anon/pen/xevgEM

— felixmosh

12

मैंने jQuery से स्वतंत्र होने के लिए इस जावास्क्रिप्ट कोड के साथ समाप्त किया।

var jsonElement = document.getElementById('json-script-tag');
var myObject = JSON.parse(jsonElement.textContent);

— जोनास
स्रोत

45

सिर्फ स्क्रिप्ट को एक आईडी क्यों न दें और इसके साथ document.getElementByIdकैसे हड़पें ? इस तरह, आपको इसे अंतिम रूप से याद रखने की ज़रूरत नहीं है। और न ही भविष्य में पेज को कोई और बदलेगा।

— जॉर्ज

इस उत्तर का मूल संस्करण प्रश्न में लिंक से प्रेरित था, stackoverflow.com/questions/6713197/…

— जोनास

2

<script id="myJSON">उपयोग में JSON पढ़ने के लिए

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

आप स्क्रिप्ट की तरह इंगित करने के लिए विधियों का भी उपयोग कर सकते हैं document.scripts[0]

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);

<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

स्निपेट का विस्तार करें

— Zekrom_Vale
स्रोत

<script id="myJSON">टैग भी जरूरत है type="application/json"विशेषता।

— मिकेल डूई बोलिंडर

1

JSON.parse($('script[src="mysript.js"]').html());

या स्क्रिप्ट की पहचान करने के लिए किसी अन्य विधि का आविष्कार करें।

हो सकता है कि इसके बजाय .html()आपको आवश्यकता हो .text()। निश्चित नहीं। उन दोनों की कोशिश करो।

— एमिल इवानोव
स्रोत

धन्यवाद, यह काम किया जब मैंने जोन को बदल दिया{"org": 10, "items":["one","two"]}

— जोनास

1

यह तरीका गलत है। यदि किसी <script>टैग में srcतत्कालीन सामग्री है तो उसके पास कोई सामग्री नहीं है।

— इरोहब अल असिमी