如何使用jQuery解析特定的JSON元素

Question

我如何在Jquery中解析此数据包以仅解析“ rendered ”元素？

请参阅参考图像。 以灰色突出显示的区域是我要使用的区域。

 {"content":{"rendered":"<section>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-6\">\n<div class=\"lc-block\">\n<div editable=\"rich\">\n<h4 id=\"the-quick-brown-fox-jumps-over-the-lazy-dog\">The quick brown fox jumps over the lazy dog<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,<br \/>\n\t\t\t\t\t\tvulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus. Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. Vivamus ut dapibus nisl, nec condimentum purus.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/p>\n<div class=\"col-md-6\">\n<div class=\"lc-block\">\n<div class=\"row\">\n<div class=\"col-md-12\"><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<\/section>\n<section>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-6\">\n<div class=\"lc-block\">\n<div editable=\"rich\">\n<h4 id=\"the-quick-brown-fox-jumps-over-the-lazy-dog\">The quick brown fox jumps over the lazy dog<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,<br \/>\n\t\t\t\t\t\tvulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus. Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. Vivamus ut dapibus nisl, nec condimentum purus.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/p>\n<div class=\"col-md-6\">\n<div class=\"lc-block\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"lc-block bg-light\">\n<div class=\"alert alert-primary\" role=\"alert\" editable=\"rich\">1. Select the <strong>Start <\/strong>Button<\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/p>\n<div class=\"lc-block\"><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<\/section>\n<section>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"lc-block bg-light\">\n<div class=\"alert alert-primary\" role=\"alert\" editable=\"rich\">1. Select the <strong>Start <\/strong>Button<\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<\/section>\n<section>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"lc-block bg-light\">\n<div class=\"alert alert-primary\" role=\"alert\" editable=\"rich\">2. Select <strong>All&nbsp;Programs<\/strong><\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<\/section>\n<section>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"lc-block bg-light\">\n<div class=\"alert alert-primary\" role=\"alert\" editable=\"rich\">3. Select <strong>Microsoft Office 2016<\/strong><\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<\/section>\n<section>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"lc-block bg-light\">\n<div class=\"alert alert-primary\" role=\"alert\" editable=\"rich\">4. Select <strong>Word 2016<\/strong><\/div>\n<\/p><\/div>\n<p><!-- \/lc-block --><\/div>\n<p><!-- \/col --><\/div>\n<\/div>\n<\/section>\n<section><\/section>\n","protected":false},"_links":{"self":[{"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/pages\/149"}],"collection":[{"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":4,"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/pages\/149\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/pages\/149\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/mywebsite.com\/wp-json\/wp\/v2\/wf_page_folders?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

我想从本节输出到html。

Answer 1

现在，我不知道您的代码是什么样的，因为您只提供了JSON对象，但是如果所有这些JSON存储在变量obj中，您将通过obj.content.rendered访问它。这将为您提供HTML作为字符串。

Answer 2

首先，您需要将JSON转换为对象，因此，如果JSON字符串存储在jsonString中，则可以使用JSON.parse：

let obj = JSON.parse(jsonString);

然后，要访问HTML，您需要进入object的内部，就像这样：

let html = obj.content.rendered;
// Or, you can use brackets:
// let html = obj["content"]["rendered"];

然后，将HTML放入jQuery constructor内，并将其append放置到所需的文档中（例如，放置到body标签）：

jQuery(html).appendTo("body");

就是这样！