JQuery getJSON loop

  • Themenstarter Themenstarter Netzwerkidi
  • Beginndatum Beginndatum
N

Netzwerkidi

Hallo zusammen,

vielleicht weiß jemand Rat bei einem Problem mit der getJSON-Funktion von jQuery.

Das folgende Statement funktioniert nicht, die beiden darauf folgenden schon. Was kann das Problem sein?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">       
    <meta name="generator" content="PSPad editor, www.pspad.com">       
    <title>    
    </title>     
  </head>     
  <body>   
<!-- *** Inhalt des Files: namensliste.json ***
test({
    "results": [{
        "name": "Zara Ali",
        "age": "67",
        "sex": "female"
    },
    {
        "name": "Harry Hirsch",
        "age": "139",
        "sex": "weder Fich noch Fleich"
    }]
});
-->           
  
    <button>lesen</button>
    <br />              
    <div id="ergebnis">    
    </div>   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">

 
	$('button').click(function(){
		$.getJSON('namensliste.json',function(data){
		  alert(data.results.length);
			$.each(json.results,function(i,ergebnis){
			   $("#ergebnis").append('<p>'+ergebnis.name+'</p>');
			});
		});
	});

</script>    
  </body>
</html>

Das foglende klappt.


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">       
    <meta name="generator" content="PSPad editor, www.pspad.com">       
    <title>    
    </title>     
  </head>     
  <body>  
<!-- Inhalt test1.json 

{
  "foo": "The quick brown fox jumps over the lazy dog.",
  "bar": "ABCDEFG",
  "baz": [52, 97]
}

--> 

<div class="result">
</div>

  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript">

$.getJSON('test1.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

  
</script>    

  </body>
</html>


Das folgende klappt auch.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">       
    <meta name="generator" content="PSPad editor, www.pspad.com">       
    <title>    
    </title>     
  </head>     
  <body>            
    <input type="text" id="query" />          
    <button>search
    </button><br />              
    <div id="ergebnis">    
    </div>   
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var url='http://search.twitter.com/search.json?callback=?&q=';
var query;
	$('button').click(function(){
		query=$("#query").val();
	  $.getJSON(url+query,function(data){
		  //alert(data.results.length);
			$.each(data.results,function(i,tweet){
			   $("#ergebnis").append('<p><img src="'+tweet.profile_image_url+'" widt="48" height="48" />'+tweet.text+'</p>');
			});
		});
	});
});
</script>
    
  </body>
</html>
Grüße

netzwerkidi
 
Das ist kein gültiges JSON.

Javascript: 
test({
    "results": [{
        "name": "Zara Ali",
        "age": "67",
        "sex": "female"
    },
    {
        "name": "Harry Hirsch",
        "age": "139",
        "sex": "weder Fich noch Fleich"
    }]
});

Es könnte so lauten

Javascript: 
{
    "results": [{
        "name": "Zara Ali",
        "age": "67",
        "sex": "female"
    },
    {
        "name": "Harry Hirsch",
        "age": "139",
        "sex": "weder Fich noch Fleich"
    }]
}
 
Das andere wäre JSONP. Dabei ruft man bei einem Server eine URL auf (z.B. bei Twitter) in dem man sie als src-Attribut eines Script-Tags angibt. Der Server liefert als Rückgabe JavaScript, welches praktisch nur ein Funktionsaufruf mit dem JSON als Parameter ist. Sobald die Antwort vom Server kommt, wird automatisch das JavaScript ausgeführt und du hast in der angegebenen Callback-Funktion das JSON als Parameter. Das ist der einzige weg wie man die Same-Origin-Policy umgehen kann. JQuery nimmt dir das bereits ab!

http://en.wikipedia.org/wiki/JSON#JSONP

http://api.jquery.com/jQuery.getJSON/
JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.
Zum Vergrößern anklicken....
 
Hi,

ja ich hatte das gelesen, dass man mit JSON die SOP-Falle umgehen kann.
Danach hatte ich ja die ganze Zeit gesucht - und vorgestern bin ich dazufällig draufgestoßen.

Und wech...
 
Hallo noch einmal,

bemerke gerade beim Testen, dass Opera (V11) getJSON nicht kann - jetzt muss ich wohl doch in die Info in die Seite packen, obwohl die separat in einem File liegen sollte.
Oder kennt einer einen workaround?

Gibt es eine Webseite, auf der man eine Anwendung auf zig verschiedenen Browsern ausführen kann, ohne

Grüße
 
Versuch es mal mit einer nicht ganz so veralteten Version von jQuery. Version 1.3.2 ist fast zwei Jahre alt. Immerhin ist Opera 11 noch ziemlich frisch.
 
Durch den Bug in Opera, und wer weiß in welchen Browsern noch, werde ich nun die Daten als Javascript-Objekt "verpacken" und verarbeiten. Dadurch ändert sich der Aufbau des getürkten JSON-Files, also ein wenig. Es wird also den Daten ein "test= (" vorangestellt.

Mir war nur wichtig, dass die Daten von "außerhalb" kommen und der Hauptfile nicht jedes Mal angepackt werden muss, wenn sich Inhalte der Art Meldungen, Neues, Ausstellungen, neue Objekte... ändern. So kann die Inhalte praktisch jeder pflegen, solange er sorgfältig genug arbeiten kann und die Syntax beachtet.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück