'Uncaught SyntaxError: Unexpected token x in JSON an position 1 ist', wenn Sie versuchen zu analysieren, HTML eingebettete JSON-string

Ive wird versucht zu analysieren, eine fest codierte JSON-string zu einem verwendbaren format, aber ich kann nicht finden, einen Weg, um es Arbeit, immer "Unerwartetes token' oder einfach nur komisch-Ausgänge. Bibliothek: jQuery. Die Daten werden gespeichert, ist:

x:10
y,10

und

x:200
y:10

Es ist gespeichert in einem data Attribut namens data-pos, und ich habe versucht, mehrere Lösungen, die nachstehend aufgeführt:

  • Token-Fehler (alle Kombinationen):

Verwendete Funktionen

JSON.parse(data);
$.parseJSON(data);
jQuery.parseJSON(data);

Datenformate

data-pos="{'x':10,'y':10}"
data-pos="{'x':'10','y':'10}"
data-pos="{x:'10',y:'10'}"
data-pos="{x:10,y:10}"
  • Nur komisch Ausgang (no parsing):

Verwendete Funktionen

alert(data);
    --> output: 
        !!DATA AS IS!!
        !!DATA AS IS!!

alert ('x: ' + data.x + ' y: ' + data.y); /* Using {x: 200, y: 10} format */
    --> outputs:
        x: undefined y: undefined
        x: {y'    <-- Yep, THIS. No typos. IDK what the hell is going on.

Datenformate

data-pos="{'x':10,'y':10}"
data-pos="{'x':'10','y':'10}"
data-pos="{x:'10',y:'10'}"
data-pos="{x:10,y:10}"

Sourcefile:

<html>    
    <head>
        <script>var devmode = true</script>
        <script>var loadExec=false</script>
        <script src="/files/js/jquery.min.js"></script>
    </head>
    <body id="body" class="selectable nooverflow">
        <div class="container hidden desktop">
            <div class="window selectable"  data-pos=!!DATA!!>
                <div class="titlebar">
                    <span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false">Window 1</span>
                </div>
            </div>
            <div class="window" data-pos=!!DATA!!> 
                <div class="titlebar">
                    <span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false">Window 2</span>
                </div>
            </div>
        </div>
        <link rel="stylesheet" type="text/css" href="/files/css/style.css">
        <script src="/files/js/core.js"></script>       <!-- irrelevant -->
        <script src="/files/js/subcore.js"></script>    <!-- irrelevant -->
        <script>        
            $(function () {
                $(window).on("load", function () {
                    $('.window').each(function (index) {
                        if (!loadExec) {
                            var data = $(this).data('pos');
                            //alert(data + "\nDatatype: " + (typeof data));
                            if (data) {
                                alert(data);

                                //PARSING HERE!! <----------

                                $(this).css({ 'top': data.y, 'left': data.x, position: 'absolute' });
                            }

                            loadExec = true;
                            $('.container').removeClass('hidden');
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Habe ich schon gesucht, aber alle die ich finden konnte unsuccesfull war oder ajax ausgerichtet. Ich brauche nur das einbetten dieses JSON-string in einem Attribut oder einige Insider-DOM Weg. Ich kann einfach nicht die Lösung finden.

VIELEN DANK FÜR IHRE ZEIT!

InformationsquelleAutor Akryllax | 2016-05-27
  1. 16

    In JSON, zitiert werden müssen, Doppel - Zitate, und alle property-Namen müssen strings sein (z.B. in Zitaten), so dass keiner der Daten-Formate, die Sie aufgeführt korrekt ist. Diese wäre richtig:

    data-pos='{"x":10,"y":10}'

    oder wenn es ist wichtig, um den Wert des Attributs in Anführungszeichen eingeschlossen werden, da der Inhalt der Attribute, die das HTML-text (etwas, das Menschen neigen dazu, zu vergessen), Sie könnte Verwendung &quot;:

    data-pos="{&quot;x&quot;:10,&quot;y&quot;:10}"

    ...aber nur tun, wenn du unbedingt verwenden " statt ' um den Wert des Attributs.

    Details über JSON, einschließlich der Tatsache, dass Saiten-und property-Namen müssen in Anführungszeichen gesetzt werden, beziehen sich auf die JSON-website.

    Beispiele:

    JS:

    console.log("a's data:", $("#a").data("pos"));
console.log("b's data:", $("#b").data("pos"));

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a" data-pos='{"x":10,"y":10}'></div>
<div id="b" data-pos="{&quot;x&quot;:10,&quot;y&quot;:10}"></div>

    • Das war es. Jetzt bin ich der dumme. IDK, warum ich nicht daran denke. Danke! BTW, ich bin beeindruckt von der schnellen Reaktion (weniger als eine minute!). Solche wow!
    InformationsquelleAutor T.J. Crowder
Schreibe einen Kommentar