如何使字符串作爲JQuery中的數組對象

Question

我已經得到了變量中的字符串值。

var mystring = '{"img_src":"/english/images/spa.jpg", 
    "img_title":"Enjoy a refreshing shower at 43,000 feet", 
    "img_alt":"Enjoy a refreshing shower at 43,000 feet", 
    "img_height":"326", 
    "img_width":"980", 
    "header":"Enjoy a refreshing shower at 43,000 feet", 
    "subheader":"One of many groundbreaking amenities", 
    "bg_color":"", 
    "url_href":"1"}, 
    {"img_src":"/english/images/spa1.jpg", 
    "img_title":"Enjoy a refreshing shower at 43,000 feet", 
    "img_alt":"Enjoy a refreshing shower at 43,000 feet", 
    "img_height":"326", 
    "img_width":"980", 
    "header":"Enjoy a refreshing shower at 43,000 feet", 
    "subheader":"One of many groundbreaking amenities", 
    "bg_color":"", 
    "url_href":"1"}' 

現在我想這個字符串變量轉換爲數組對象。所以，如果我嘗試訪問它，我的函數應該像一個數組對象。例如。

some code to Convert(mystring) to an Array Object(myArryObject)，那麼我想它傳遞給我的功能類似下面

$.fn.liveBanner = function(myArryObject,optional_options) 
    { 
     //here I want to access my myArryObject as below 
     alert(myArryObject[0].img_src) //then it should give "/english/images/spa.jpg" 
}); 

請建議使用JQuery。

編輯：

我的變化通過@Deceze的建議，請參閱以下內容：

   var myString = "'"+ $("#RotationImages #mainHidden").attr("value")+"'";  

    var myArrayobj = jQuery.parseJSON('[' + myString + ']'); 
    alert(myArrayobj.img_src); 

上面的代碼是給下面的錯誤

Error: uncaught exception: Invalid JSON:'{"img_src":"/english/images/spa.jpg", "img_title":"Enjoy a refreshing shower at 43,000 feet","img_alt":"Enjoy a refreshing shower at 43,000 feet", "img_height":"326","img_width":"980","header":"Enjoy a refreshing shower at 43,000 feet","subheader":"One of many groundbreaking amenities on the Flight","bg_color":"","url_href":"1"}' 

Answer 1

當你的字符串只包含數組內的對象，你有你解析它之前增加數組聲明：

var myArrayobj = jQuery.parseJSON('[' + myString + ']'); 

Answer 2

嗯，一開始，你的輸入的類型=「隱藏」，這意味着無論你在周圍div上運行什麼jQuery，這些元素都不會出現。如果您的邊界div具有「display：none」，那麼沒有理由將輸入類型設置爲隱藏。

你真的需要修改你寫這段代碼的方式。你應該有一個樣式表來隱藏圖像（你應該把它作爲圖像放在代碼中），然後你可以使用javascript來顯示它們。您可以使用jQuery UI Tabs演示作爲指導如何正確構建標記，然後從那裏開始。

是否存在使用圖像輸入的特定原因？

Answer 3

好吧，你仍然沒有在這裏正確的方向。

你jQuery的有以下幾點：

.attr('type','hidden'). 

這個段的類型設置爲隱藏。然後，您將輸出寫入屏幕。

更改爲：

.attr('type','image'). 

，看看是否有差別（你必須創建在您改回爲「隱藏」，當你做了一個未設定功能）。

就像我說的，這實際上並不是最乾淨的方式來做你想做的事情，但我不能指出你任何其他方式，而不是建議你再次嘗試使用不同的方法。

Answer 4

最後，我能夠寫一些JQuery，它幫助我解決我的問題，現在我能夠得到我想要的HTML。下面是JQuery代碼，請看一看，讓我知道任何改進。

$(document).ready(function() 
{ 
     var rotationImagelength = $('#RotationImages input[type=hidden]').length; //Getting the length of the Rotation Image Input type hidder 
     var ImageDetail; 
     var $addDetails=""; 
     var fromPageInput = $("<input>").attr("id", "mainHidden").attr("type", "hidden").attr("name", "fromPage").val(ImageDetail); //Generating the dynamic input type hidden 

     $('#RotationImages input[type=hidden]').each(function(index,element) //Loop for all the input type hidden in RotationImage DIV 
     { 

      if(index != rotationImagelength - 1) //Loop for checking not the last input hidden, we are adding extra Comma(,) 
      {      
       ImageDetail = '{"img_src":"'+ $(element).attr("src")+'", "img_title":"'+ $(element).attr("title")+'","img_alt":"'+ $(element).attr("alt")+'", "img_height":"'+ $(element).attr("height")+'","img_width":"'+ $(element).attr("width")+'","header":"'+ $(element).attr("header")+'","subheader":"'+ $(element).attr("subheader")+'","bg_color":"'+ $(element).attr("color")+'","url_href":"'+ $(element).attr("href")+'"},';             
       $addDetails += ImageDetail; 
      }  
      else //Generating HTML for the last input hidden 
      { 
       ImageDetail = '{"img_src":"'+ $(element).attr("src")+'", "img_title":"'+ $(element).attr("title")+'","img_alt":"'+ $(element).attr("alt")+'", "img_height":"'+ $(element).attr("height")+'","img_width":"'+ $(element).attr("width")+'","header":"'+ $(element).attr("header")+'","subheader":"'+ $(element).attr("subheader")+'","bg_color":"'+ $(element).attr("color")+'","url_href":"'+ $(element).attr("href")+'"}';                
       $addDetails += ImageDetail; 
      }     

      $(fromPageInput).val($addDetails); //Adding full values in the dynamic input hidden created above  


     }); 
     $("#RotationImages").append($(fromPageInput)); //Appending to the RotationImage DIV so that we can easily use in JQuery. 
     var test = ($("#RotationImages #mainHidden").attr("value")); 
     alert(test); 
}); 

感謝您的幫助，您的建議是隨時歡迎

Answer 5

您需要使用JavaScript變種（我認爲）：因此，對

gImgs = [ 
    {"img_src":"/english/images/spa.jpg", 
    "img_title":"Enjoy a refreshing shower at 43,000 feet", 
    "img_alt":"Enjoy a refreshing shower at 43,000 feet", 
    "img_height":"326", 
    "img_width":"980", 
    "header":"Enjoy a refreshing shower at 43,000 feet", 
    "subheader":"One of many groundbreaking amenities", 
    "bg_color":"", 
    "url_href":"1"} 
]; 

然後

$('.slideshow').liveBanner(gImgs, {"autostart":false, 
    "pause_time":5500, "random":false}); 

每一頁你將有不同的gImgs。請注意，如果包括對liveBanner創建一個腳本，你將有<script src="..."></script>之前定義gImgs，如：

<html> 
    <head> 
     <!-- ... --> 
     <script type="application/x-javascript"> 
     <!-- 
      var gImgs = [ /* ... */ ]; 
     --> 
     </script> 
     <script type="application/x-javascript" src="yourscript.js"></script> 
    </head> 
    <body> 
    <!-- ... --> 
    </body> 
</html> 

Answer 6

嘗試jQuery.parseJSON。

Answer 7

鑑於你mystring定義，執行var myArray = jQuery.parseJSON('[' + mystring } ']');將導致對象的數組。查看this jsfiddle作爲一個實例。

您得到無效JSON錯誤的原因是因爲您將有效的JSON封裝在單引號中，從而使其無效。也就是，第一行：

var myString = "'"+ $("#RotationImages #mainHidden").attr("value")+"'";  

var myArrayobj = jQuery.parseJSON('[' + myString + ']'); 
alert(myArrayobj.img_src); 

正在使您的JSON無效。應（提供的值是正確的）的第一行：

var myString = $("#RotationImages #mainHidden").attr("value"); 

有關詳細信息上JSON看到json.org和RFC 4627。