JAVASCRIPTだけを使用してデータ値を取得する方法

Question

evalを使用せずにJavascriptでデータ値を取得するにはどうすればよいですか？

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

基本的に、このURLからデータを解析する方法を教えてもらえますか？ http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json

あなたはパースことに意味していません。それは古い学校のJSONPです。一つの方法または別の、それは評価する必要があります。 JSONPは、歴史的にCORSが適切でない場合、CORS（クロスオリジンリソース共有）を行うために使用されます。

あなたはあなたのプログラム内jsonFlickrFeedを定義する必要があり、その後、

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

これはjsonFlickrFeedは、データオブジェクトと呼ばれるようになります。

注：jsonFlickrFeedは実際にJavaScriptオブジェクトを受け入れているので、用語JSONがここに誤用されています。 JSON の文字列ではありません。

JSONPコールバック：通常、コールバックの名前は、&callback=fooをJSONPリクエストに渡すことで設定できます。私はあなたが提供したflickr URLを使ってこれを試しましたが、彼らのAPIは何らかの形で機能するか、ユーザ名付きコールバックをサポートしません。 APIをチェックし、わかりやすい命名規則に従ってコールバックを指定できるかどうかを確認してください。

---

ここでは、どのように動作するのかを示す完全な機能のデモがあります。 3つの応答データをコンソールに書き出します。 title,linkおよびmodifiedである。明らかに、あなたはデータで必要なことをすることができます。

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

ここではいずれの例で

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>

items属性で画像を表示する別のデモ、私は手動で解析する必要がなかったことに注意です何でもここにはJSONはないので、解析するものはありません。

Answer 2

下記のコメントによると、あなたはこのコードを持っている：

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); 
} 

問題は、応答は100％が適切にJSONをフォーマットされていないということです。主なコンテンツは、関数呼び出しのように見えるものの中に埋め込まれている：

`jsonFlickrFeed(main content here)` 

あなたはそのラッパーを削除する必要がありますし、その後、残りの文字列にJSON.parseを使用することができ

：また

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

あなたが示したコードから、XHRが完了したときにはloadコールバックを設定していません。