如何使用 JSON 创建输出

Question

我有一个结构如下的 json 文件：

[
    {
    "style":"h1",
    "content":"this is h1"
    },
    {
      "style":"p",
      "content":"this is a long paragraphe "
    },
    {
      "style":"img",
      "content":"image1.jpg"
    },
    {
    "style":"h2",
    "content":"this is h2"
    },
    {
    "style":"h3",
    "content":"this is h3"
    },
    {
    "style":"h1",
    "content":"this is h1 number 2"
    },
    {
      "style":"p",
      "content":"this is a long paragraphe 2 "
    },
    {
      "style":"img",
      "content":"image2.jpg"
    },
    {
    "style":"h2",
    "content":"this is h2 number 2"
    },
    {
    "style":"h3",
    "content":"this is h3 number 2"
    }  
]

而且我需要它在 JavaScript 中像这样输出：

这是h1 这是h2 这是h3 这是一个很长的段落 图像1.jpg 这是 h1 数字 2 这是 h2 2 号 这是h3 2号 这是一个很长的段落 2 图像2.jpg

Answer 1

Array.prototype.forEach() 完成这项工作。也遍历列表。

var data=[
  {"style":"h1","content":"this is h1"},
  {"style":"p","content":"this is a long paragraphe "}
];
data.forEach(function(elt){
  console.log(elt.content);
});
for (var i=0; i<data.length; i++){
  console.log(data[i].content);
}

如果您的 json 文件尚未获取，请使用 ajax 请求获取它并按上述方法继续。 （ajax请求简介：https://www.w3schools.com/xml/ajax_intro.asp）

// creates an Ajax object to fetch the content of a file
var ajax=new XMLHttpRequest();
ajax.open("GET","data.json",false);
ajax.send();

// dataString contains the .json file as a string
var dataString=ajax.response;

// we parse it (ie convert it into a javascript object)
var dataObject=JSON.parse(dataString);

// and we iterate through it
for (var i=0; i<dataObject.length; i++){
  console.log(dataObject[i].content);
}

Answer 2

我假设您正在使用 jQuery，并且您正在尝试获取文件并仅打印没有 html 标记的“内容”。

<div id="output">
    <!-- here we'll write the output-->
</div>
<script>
    $.get('your_json_file.json',function(data){
        var data = JSON.parse(data); //may not be neccesary, it depends on how you output your json
        $.each(data, function(index, value){
            //here you get each object of the array. You only want the content
            $('#output').append('<p>' + value.content + '</p>');
        });
    });
</script>