2017-04-10 102 views
0

这有点难以解释,但我会尽我所能解释它,所以我可以得到一些帮助,并希望有人在这个问题上解决一些问题。jQuery多维JSON数组与不同的数据在相同的JSON?

基本上,我有一个JSON看起来像这样:

"created_at": "Sun Apr 09 17:56:20 +0000 2017", 
    "id": 851131679167139842, 
    "id_str": "851131679167139842", 
    "text": "hello world with an image goes here as a test! https:\/\/t.co\/jNfdESxPcn", 
    "truncated": false, 
    "entities": { 
     "hashtags": [], 
     "symbols": [], 
     "user_mentions": [], 
     "urls": [], 
     "media": [{ 
      "id": 851131665623732225, 
      "id_str": "851131665623732225", 
      "indices": [47, 70], 
      "media_url": "http:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg", 
      "media_url_https": "https:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg", 
      "url": "https:\/\/t.co\/jNfdESxPcn", 
      "display_url": "pic.twitter.com\/jNfdESxPcn", 
      "expanded_url": "https:\/\/twitter.com\/DavidHoperz\/status\/851131679167139842\/photo\/1", 
      "type": "photo", 
      "sizes": { 
       "thumb": { 
        "w": 150, 
        "h": 150, 
        "resize": "crop" 
       }, 
       "large": { 
        "w": 670, 
        "h": 728, 
        "resize": "fit" 
       }, 
       "small": { 
        "w": 626, 
        "h": 680, 
        "resize": "fit" 
       }, 
       "medium": { 
        "w": 670, 
        "h": 728, 
        "resize": "fit" 
       } 
      } 
     }] 
    }, 
    "extended_entities": { 
     "media": [{ 
      "id": 851131665623732225, 
      "id_str": "851131665623732225", 
      "indices": [47, 70], 
      "media_url": "http:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg", 
      "media_url_https": "https:\/\/pbs.twimg.com\/media\/C8_TvYqW0AEbBaP.jpg", 
      "url": "https:\/\/t.co\/jNfdESxPcn", 
      "display_url": "pic.twitter.com\/jNfdESxPcn", 
      "expanded_url": "https:\/\/twitter.com\/DavidHoperz\/status\/851131679167139842\/photo\/1", 
      "type": "photo", 
      "sizes": { 
       "thumb": { 
        "w": 150, 
        "h": 150, 
        "resize": "crop" 
       }, 
       "large": { 
        "w": 670, 
        "h": 728, 
        "resize": "fit" 
       }, 
       "small": { 
        "w": 626, 
        "h": 680, 
        "resize": "fit" 
       }, 
       "medium": { 
        "w": 670, 
        "h": 728, 
        "resize": "fit" 
       } 
      } 
     }] 
    }, 
    "source": "\u003ca href=\"http:\/\/twitter.com\" rel=\"nofollow\"\u003eTwitter Web Client\u003c\/a\u003e", 
    "in_reply_to_status_id": null, 
    "in_reply_to_status_id_str": null, 
    "in_reply_to_user_id": null, 
    "in_reply_to_user_id_str": null, 
    "in_reply_to_screen_name": null, 
    "user": { 
     "id": 851119985732800513, 
     "id_str": "851119985732800513", 
     "name": "David", 
     "screen_name": "DavidHoperz", 
     "location": "", 
     "description": "", 
     "url": null, 
     "entities": { 
      "description": { 
       "urls": [] 
      } 
     }, 
     "protected": false, 
     "followers_count": 0, 
     "friends_count": 21, 
     "listed_count": 0, 
     "created_at": "Sun Apr 09 17:09:52 +0000 2017", 
     "favourites_count": 0, 
     "utc_offset": null, 
     "time_zone": null, 
     "geo_enabled": false, 
     "verified": false, 
     "statuses_count": 3, 
     "lang": "en", 
     "contributors_enabled": false, 
     "is_translator": false, 
     "is_translation_enabled": false, 
     "profile_background_color": "F5F8FA", 
     "profile_background_image_url": null, 
     "profile_background_image_url_https": null, 
     "profile_background_tile": false, 
     "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg", 
     "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg", 
     "profile_link_color": "1DA1F2", 
     "profile_sidebar_border_color": "C0DEED", 
     "profile_sidebar_fill_color": "DDEEF6", 
     "profile_text_color": "333333", 
     "profile_use_background_image": true, 
     "has_extended_profile": false, 
     "default_profile": true, 
     "default_profile_image": false, 
     "following": false, 
     "follow_request_sent": false, 
     "notifications": false, 
     "translator_type": "none" 
    }, 
    "geo": null, 
    "coordinates": null, 
    "place": null, 
    "contributors": null, 
    "is_quote_status": false, 
    "retweet_count": 0, 
    "favorite_count": 0, 
    "favorited": false, 
    "retweeted": false, 
    "possibly_sensitive": false, 
    "lang": "en" 
}, { 
    "created_at": "Sun Apr 09 17:47:36 +0000 2017", 
    "id": 851129482832470026, 
    "id_str": "851129482832470026", 
    "text": "How to display twitter posts using javascript https:\/\/t.co\/I49vjVbAUJ", 
    "truncated": false, 
    "entities": { 
     "hashtags": [], 
     "symbols": [], 
     "user_mentions": [], 
     "urls": [{ 
      "url": "https:\/\/t.co\/I49vjVbAUJ", 
      "expanded_url": "https:\/\/www.script-tutorials.com\/how-to-display-twitter-posts-using-javascript\/", 
      "display_url": "script-tutorials.com\/how-to-display\u2026", 
      "indices": [46, 69] 
     }] 
    }, 
    "source": "\u003ca href=\"http:\/\/twitter.com\" rel=\"nofollow\"\u003eTwitter Web Client\u003c\/a\u003e", 
    "in_reply_to_status_id": null, 
    "in_reply_to_status_id_str": null, 
    "in_reply_to_user_id": null, 
    "in_reply_to_user_id_str": null, 
    "in_reply_to_screen_name": null, 
    "user": { 
     "id": 851119985732800513, 
     "id_str": "851119985732800513", 
     "name": "David", 
     "screen_name": "DavidHoperz", 
     "location": "", 
     "description": "", 
     "url": null, 
     "entities": { 
      "description": { 
       "urls": [] 
      } 
     }, 
     "protected": false, 
     "followers_count": 0, 
     "friends_count": 21, 
     "listed_count": 0, 
     "created_at": "Sun Apr 09 17:09:52 +0000 2017", 
     "favourites_count": 0, 
     "utc_offset": null, 
     "time_zone": null, 
     "geo_enabled": false, 
     "verified": false, 
     "statuses_count": 3, 
     "lang": "en", 
     "contributors_enabled": false, 
     "is_translator": false, 
     "is_translation_enabled": false, 
     "profile_background_color": "F5F8FA", 
     "profile_background_image_url": null, 
     "profile_background_image_url_https": null, 
     "profile_background_tile": false, 
     "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg", 
     "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg", 
     "profile_link_color": "1DA1F2", 
     "profile_sidebar_border_color": "C0DEED", 
     "profile_sidebar_fill_color": "DDEEF6", 
     "profile_text_color": "333333", 
     "profile_use_background_image": true, 
     "has_extended_profile": false, 
     "default_profile": true, 
     "default_profile_image": false, 
     "following": false, 
     "follow_request_sent": false, 
     "notifications": false, 
     "translator_type": "none" 
    }, 
    "geo": null, 
    "coordinates": null, 
    "place": null, 
    "contributors": null, 
    "is_quote_status": false, 
    "retweet_count": 2, 
    "favorite_count": 1, 
    "favorited": false, 
    "retweeted": false, 
    "possibly_sensitive": false, 
    "lang": "en" 
}, { 
    "created_at": "Sun Apr 09 17:33:43 +0000 2017", 
    "id": 851125986976567297, 
    "id_str": "851125986976567297", 
    "text": "Hello world", 
    "truncated": false, 
    "entities": { 
     "hashtags": [], 
     "symbols": [], 
     "user_mentions": [], 
     "urls": [] 
    }, 
    "source": "\u003ca href=\"http:\/\/twitter.com\" rel=\"nofollow\"\u003eTwitter Web Client\u003c\/a\u003e", 
    "in_reply_to_status_id": null, 
    "in_reply_to_status_id_str": null, 
    "in_reply_to_user_id": null, 
    "in_reply_to_user_id_str": null, 
    "in_reply_to_screen_name": null, 
    "user": { 
     "id": 851119985732800513, 
     "id_str": "851119985732800513", 
     "name": "David", 
     "screen_name": "DavidHoperz", 
     "location": "", 
     "description": "", 
     "url": null, 
     "entities": { 
      "description": { 
       "urls": [] 
      } 
     }, 
     "protected": false, 
     "followers_count": 0, 
     "friends_count": 21, 
     "listed_count": 0, 
     "created_at": "Sun Apr 09 17:09:52 +0000 2017", 
     "favourites_count": 0, 
     "utc_offset": null, 
     "time_zone": null, 
     "geo_enabled": false, 
     "verified": false, 
     "statuses_count": 3, 
     "lang": "en", 
     "contributors_enabled": false, 
     "is_translator": false, 
     "is_translation_enabled": false, 
     "profile_background_color": "F5F8FA", 
     "profile_background_image_url": null, 
     "profile_background_image_url_https": null, 
     "profile_background_tile": false, 
     "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg", 
     "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/851182210732494848\/lmgbNLvC_normal.jpg", 
     "profile_link_color": "1DA1F2", 
     "profile_sidebar_border_color": "C0DEED", 
     "profile_sidebar_fill_color": "DDEEF6", 
     "profile_text_color": "333333", 
     "profile_use_background_image": true, 
     "has_extended_profile": false, 
     "default_profile": true, 
     "default_profile_image": false, 
     "following": false, 
     "follow_request_sent": false, 
     "notifications": false, 
     "translator_type": "none" 
    }, 
    "geo": null, 
    "coordinates": null, 
    "place": null, 
    "contributors": null, 
    "is_quote_status": false, 
    "retweet_count": 0, 
    "favorite_count": 0, 
    "favorited": false, 
    "retweeted": false, 
    "lang": "en" 
}] 

而且我有一个jQuery阅读,看起来像这样的JSON数据:

var poutput = $('.listHolder'); 

$.ajax({ 
    url: 'page.php', 
    dataType: 'json', 
    timeout: 5000, 
    success: function(data){ 
     $.each(data, function(pi,item){ 
      str = item.id_str; 

      var products = '<div id="'+item.id_str+'" class="items">'+ 
       '<p class="names">'+item.created_at+'</p>'+ 
       '<p class="names">'+item.text+'</p>'+ 
       '<img src="'+item.entities.media[0].media_url_https+'" width="100%">'+ 
       '</div>'; 
      console.log(products); 
      poutput.append(products); 
     }); 
    }, 
    error: function(){ 
     //alert('There was an error loading the data.'); 
    } 
}); 

如果你看一下JSON数据(上面的第一个代码),你会看到一些数据有media_url_https,有些数据没有。

这是我的问题,因为当我尝试使用上面的jQuery代码获取所有JSON数据时,它只会获取其中包含media_url_https的数据,并忽略其他没有media_url_https的数据。

但是,当我从我的代码中删除'<img src="'+item.entities.media[0].media_url_https+'" width="100%">'+,它会得到所有的数据,但不会有任何图像(图像也是必需的)!

是否有任何方式从该JSON数据获取所有数据,包括图像等?

我希望这是有道理的,有人可以帮助我解决这个问题。

任何帮助,将不胜感激。

编辑:

这是我试图用IF()和其他()语句:

 $.each(data, function(pi,item){ 
      str = item.id_str; 

     var media =""; 

     var mediaUrl = item.entities.media[0].media_url_https; 

     if(mediaUrl !=''){ 

     media = '<img src="'+item.entities.media[0].media_url_https+'" width="100%">'; 

     }else{ 
     media = ''; 

     } 


      //alert(item.entities.media[0].media_url_https); 
       var products = '<div id="'+item.id_str+'" class="items">'+ 
           '<p class="names">'+item.text+'</p>'+ 
           media+ 
           '</div>'; 


///reset of my code........ 
+0

目前还不清楚你在问什么。如果你想要永远有一个图像,那么总是有一个'media_url_https'值。如果该值不存在,应显示什么图像? –

+0

您需要'if()'条件来检查属性并作出相应的反应。除此之外,还不清楚预期的结果是什么 – charlietfl

+0

@RoryMcCrossan,对不起,如果它有点混乱。基本上我需要所有的数据(包含图像和没有图像的数据)。与我目前的jQuery代码,我只能得到与图像或没有图像的人。 –

回答

1

由于所有items的有entities属性,但只有其中的一些entities的有media属性,你应该检查该media财产的存在及其所有子属性下降到media_url_https使用前建立你的html字符串,即:

if (item.entities.media 
    && item.entities.media.length 
    && item.entities.media[0].media_url_https) { 
    // code to add image to html string 
} 
0

从我了解你的问题,你的意见:你想知道给定一个可能或可能不具有某些属性的对象,如何解释不存在的属性?特别与你的IMG。

正如评论中所提到的,如果某些属性不存在,则可以为某些属性编写条件以填充值,并且应该仍会遍历所有数据。

我喜欢建议默认值的一种方法是利用JavaScript的truthy功能,使我们能够像布尔值一样处理常规变量有点

var products = '<div id="'+item.id_str+'" class="items">'+ 
      '<p class="names">'+item.created_at+'</p>'+ 
      '<p class="names">'+item.text+'</p>'+ 
      '<img src="'+(item.entities.media[0].media_url_https || "./img/default_img.png")+'" width="100%">'+ 
      '</div>'; 

在该片断的编码余利用的事实,在JavaScript中每个值具有“truthy”或“falsy”值到它,并使用布尔或操作员实际上,我可以聚结“falsy”值插入一个“真理”默认的一个。

在简单的英语,我改变会沿着使用item.entities.media[0].media_url_https如果值存在,并且不为空的”行了行,否则使用"./img/default_img.png"

而如果它是不明确的,你可以改变"./img/default_img.png"任何你想要的,另一个变量,一个不同的字符串常量等。

我喜欢使用这样的truthy评估,因为它有助于保持代码相当干净,并且真正节省了需要发送到浏览器的空间和数据量(即使数量可以忽略不计)。

0

根据詹姆斯评论,这工作像一个魅力。

var poutput = $('.listHolder'); 

    $.ajax({ 
    url: 'PAGE.php', 
     dataType: 'json', 
     timeout: 5000, 
     success: function(data){ 




     $.each(data, function(pi,item){ 


     if (item.entities.media && item.entities.media.length && item.entities.media[0].media_url_https){ 



     var media = '<img src="'+item.entities.media[0].media_url_https+'" width="100%">'; 
     var products = '<div id="'+item.id_str+'" class="items">'+ 
         '<p class="names">'+item.text+'</p>'+ 
         media+ 
         '</div>'; 

     }else{ 



     var products = '<div id="'+item.id_str+'" class="items">'+ 
         '<p class="names">'+item.text+'</p>'+ 
         '</div>'; 
     } 






       console.log(products); 

       poutput.append(products); 




}); 


}, 

     error: function(){ 
      //alert('There was an error loading the data.'); 
     } 


});