# JQuery getJSON loop



## Netzwerkidi (19. Januar 2011)

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?


```
<!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.



```
<!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.


```
<!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


----------



## CPoly (19. Januar 2011)

Das ist kein gültiges JSON.


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

Es könnte so lauten


```
{
    "results": [{
        "name": "Zara Ali",
        "age": "67",
        "sex": "female"
    },
    {
        "name": "Harry Hirsch",
        "age": "139",
        "sex": "weder Fich noch Fleich"
    }]
}
```


----------



## Netzwerkidi (19. Januar 2011)

Hai CPoly, 

danke für die fixe Antwort - die auch noch richtig ist!

Die Syntax hatte ich aus dem Twitter Example file (http://apiwiki.twitter.com/w/page/22554756/Twitter-Search-API-Method:-search):


```
foo({
    "results": [{
        "from_user_id_str": "145376502",
        "profile_image_url": "http://a2.twimg.com/profile_images/1216330268
...
...
    "max_id_str": "27700903159009280",
    "query": "twitter"
});
```

Nochmals besten Dank und 

liebe Grüße


----------



## CPoly (19. Januar 2011)

Das andere wäre JSON*P*. 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.


----------



## Netzwerkidi (19. Januar 2011)

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...


----------



## Netzwerkidi (20. Januar 2011)

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


----------



## CPoly (21. Januar 2011)

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.


----------



## Netzwerkidi (21. Januar 2011)

Nutze inzwischen die 1.4.4 und, wenn ich online bin, die "jquery-latest.js".


----------



## Netzwerkidi (21. Januar 2011)

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.


----------

