Wie bekomme ich die Datenwerte nur mit JAVASCRIPT

Question

Wie bekomme ich die Datenwerte mit nur Javascript ohne eval verwenden?

jsonFlickrFeed({ 
    "title": "Recent Uploads tagged punctuation and atsign", 
    "link": "http:\/\/www.flickr.com\/photos\/", 
    "description": "", 
    "modified": "2014-01-09T15:40:57Z", 
    "generator": "http:\/\/www.flickr.com", 
    "items": [ 
    { 
    ..... 
    ..... 

Answer 1

Grundsätzlich kann mir jemand sagen, wie man die Daten von dieser URL parsen? http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json

Sie sind nicht zu Parse bedeuten diese. Das ist eine alte Schule JSONP Antwort. Auf die eine oder andere Weise muss es evaluiert werden. JSONP wird historisch verwendet, um CORS (Cross-Origin-Ressource teilen), wo richtige CORS ist nicht möglich.

Sie müssen jsonFlickrFeed in Ihrem Programm definieren und dann

<script type="application/javascript" 
     src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json"> 
</script> 

Dies bewirkt, dass jsonFlickrFeed mit dem Datenobjekt aufgerufen werden.

Hinweis: der Begriff JSON hier, weil jsonFlickrFeed missbraucht wird, ist eigentlich ein JavaScript-Objekt zu akzeptieren; kein JSON Zeichenfolge.

JSONP-Callbacks: Normalerweise können Sie den Namen des Callbacks konfigurieren, indem Sie &callback=foo an die JSONP-Anforderung übergeben. Ich habe das mit der Flickr-URL versucht, die Sie angegeben haben, aber ihre API funktioniert irgendwie anders oder unterstützt keine Callbacks mit dem Namen eines Benutzers. Überprüfen Sie ihre API und sehen Sie, ob Sie einen Rückruf nach einer vernünftigen Namenskonvention angeben können.

---

Hier ist eine voll funktionsfähige Demo, die Ihnen zeigt, wie es funktioniert. Wir werden 3 Teile der Antwortdaten auf die Konsole schreiben; title, link und modified. Natürlich können Sie mit den Daten machen, was Sie wollen.

<script> 
 
    function jsonFlickrFeed (data) { 
 
    console.log("title", data.title) 
 
    console.log("link", data.link) 
 
    console.log("modified", data.modified) 
 
    } 
 
</script> 
 

 
<script type="application/javascript" 
 
     src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json"> 
 
</script>

Hier ist eine weitere Demo, die die Bilder in dem items Attribute zeigt

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
img { 
 
    display: flex; 
 
    max-height: 50px; 
 
}

<script> 
 
    function makeImage (src) { 
 
    return Object.assign(document.createElement('img'), {src}) 
 
    } 
 
    
 
    function jsonFlickrFeed (data) { 
 
    for (let {media: {m}} of data.items) 
 
     document.body.appendChild(makeImage(m)) 
 
    } 
 
</script> 
 

 
<script type="application/javascript" 
 
     src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json"> 
 
</script>

In jedem Beispiel beachten Sie, dass ich nicht von Hand habe zu analysieren etwas. Es gibt kein JSON hier, also gibt es nichts zu analysieren.

Answer 2

nach Ihren Kommentar unten, haben Sie diesen Code:

var request = new XMLHttpRequest(); 
request.open("GET", "json/flickr.json", false); 
request.send(null) 
var response_object = (request.response); 
console.log(response_object); 
function jsonFlickrFeed(json){ 
    var obj = JSON.parse(json); 
    console.log(obj); 
} 

Das Problem ist, dass die Antwort nicht zu 100% korrekt formatiert JSON ist. Der Hauptinhalt ist eingebettet in, was scheint, ein Funktionsaufruf zu sein:

`jsonFlickrFeed(main content here)` 

Sie werden feststellen, dass Wrapper entfernen müssen und dann können Sie JSON.parse auf dem restlichen Zeichenfolge verwenden:

var response_object = request.responseText.replace("jsonFlickrFeed(", "").substr(0,str.length-1)); 
    var obj = JSON.parse(response_object); 

Auch , von dem Code, den Sie zeigten, haben Sie keinen load Rückruf für wann das XHR abgeschlossen.