2015-02-12 23 views
0

我有從json的代碼,我想打印出來的HTML頁面。如何從這個JSON Javascript中打印數據?

{"offset":0, 
"results":[ 
    {"link_1/_text":"Reflection", 
    "text_1":"January 30, 2015", 
    "link_3":"http://pmj.astaga.com/article/?p=414", 
    "link_1":"http://pmj.astaga.com/article/?cat=67", 
    "link_3/_text":"Meditasi: Makna Rasa Sakit", 
    "text_list_1":["kebahagiaan","meditasi","Meditasi: Makna Rasa Sakit |Matchmatter.com","on pain kahlil gibran","puisi kahlil gibran"], 
    "image_1":"http://pmj.astaga.com/article/wp-content/uploads/2015/01/Inspirational-Quotes-Image-Khalil-Gibran.jpg", 
    "title_text":"Meditasi: Makna Rasa Sakit", 
    "text_2":"Semua manusia yang hidup di dunia ini ingin merasakan kebahagiaan, dalam bentuk apapun." 
    }, 
    {"link_1/_text":"Love and Sex", 
    "text_1":"January 26, 2015", 
    "link_3":"http://pmj.astaga.com/article/?p=411", 
    "link_1":"http://pmj.astaga.com/article/?cat=64", 
    "link_2":"http://pmj.astaga.com/article/?cat=65", 
    "link_3/_text":"Take and Give", 
    "text_list_1":["memberi dan menerima","men","Take and Give","Women"], 
    "image_1":"http://pmj.astaga.com/article/wp-content/uploads/2015/01/article-2289562-187F97F8000005DC-947_634x482.jpg", 
    "title_text":"Take and Give", 
    "text_2":"Untuk beberapa alasan yang sulit dimengerti, alam telah membagi pria dan wanita dalam sebuah perbedaan sikap dalam memandang sebuah hal.", 
    "link_2/_text":"Men" 
    }, 
    {"link_1/_text":"Women", 
    "text_1":"January 23, 2015", 
    "link_3":"http://pmj.astaga.com/article/?p=404", 
    "link_1":"http://pmj.astaga.com/article/?cat=71", 
    "link_3/_text":"10 Saran Bagi Wanita Untuk Menyatakan Cinta Lebih Dulu", 
    "text_list_1":["10 saran jika ingin menyatakan cinta","menyatakan cinta", 
    "menyatakan cinta kepada pria","menyatakan cinta lebih dulu", 
    "Mungkinkah Seorang Wanita Menyatakan Cintanya Lebih Dulu?|Matchmatter.com","wanita"], 
    "image_1":"http://pmj.astaga.com/article/wp-content/uploads/2015/01/secret-admirer.jpg", 
    "title_text":"10 Saran Bagi Wanita Untuk Menyatakan Cinta Lebih Dulu", 
    "text_2":"Apakah anda pernah menyukai seorang pria, dan dilihat dari gelagatnya sepertinya dia juga menyukai anda?" 
    } 
], 
    "cookies":[], 
    "connectorVersionGuid":"ed0ce142-861e-4d2e-bacd-3dd1de491a69", 
    "connectorGuid":"d6d21746-2d8f-4980-b1ec-8e1a5d52b133", 
    "pageUrl":"http://pmj.astaga.com/article/?page_id=709" 
} 

但問題是,我得到了一個以上的字符串來調用數據,例如

「LINK_1/_text」: 「反思」

如果我用這個代碼我會得到只是網址而不是標題或內容

<script> 
    var data = '$json_data'; 
    $(data.results).each(function() { 
    var output = "<p>" + this.link_1 + "</p>"; 
    $('#placeholder').append(output); 
    }); 
</script> 

關鍵是,如何打印反射結果 你能幫我解釋一下這段代碼嗎?

Thankyou

回答

1

使用你的語法,您可以同時使用的jQuery或JavaScript遍歷的JSON。

var data = {---YOUR JSON...}; 

使用JQuery

$(data.results).each(function() { 
    var output = "<div class='container'>"; 
    output += "<p>" + this.title_text + "</p>"; 
    output += "<p>" + this.text_1 + "</p>"; 
    output += "<p>" + this.link_1 + "</p>"; 
    output += "</div>"; 
    $('#placeholder1').append(output); 
}); 

使用使用JavasScript

var d=document.getElementById("placeholder2"); 
var output=""; 
for (var i in data.results) { 
    output += "<div class='container'>"; 
    for (var prop in data.results[i]) { 
     output += "<p>" + prop + " : " + data.results[i][prop] + "</p>"; 
    } 
    output += "</div>"; 
} 
d.innerHTML=output; 

Here the JSFiddle example

+0

最佳答案 三江源 – 2015-02-12 04:24:24

0

您可以使用Jquery.parseJSON()。這會給你一個js對象,你可以用它來實現你想要的。

var obj = jQuery.parseJSON('{ "name": "John" }'); 
alert(obj.name === "John"); 
0

你需要做這樣的事情:

var json = [ 
    { "one": "1" }, 
    { "two": "2" }, 
    { "three": "3" } 
]; 

$.each(json, function() { 
    $.each(this, function(name, value) { 
    /// do stuff 
    console.log(name + '=' + value); 
    }); 
});