Question

我正在尝试将使用mysql和php生成的json数据解析为行div上的基于bootstrap的html。

    var myJson ="[
        {
            "id":"1",
            "title":"SAP MONSON",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c1.png"
        },
        {
            "id":"2",
            "title":"IIBA CETERFICATION",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c2.png"
        },
        {
            "id":"3",
            "title":"ANDROID CETERFICATION",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c3.png"
        },
        {
            "id":"4",
            "title":"MIA - BEGGINING FINANCE",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c4.png"
        },
        {
            "id":"5",
            "title":"HR DF CONFERENCE",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c5.png"
        },
        {
            "id":"6",
            "title":"SUCCESS WORKSHOP",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c6.png"
        }
    ]";

var obj = JSON.parse(myJson);
myFunction(obj);
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.what to put here.length; i++) {
        out += arr.what to put here[i].firstName +
        arr.what to put here[i].lastName + '<br/>';
    }
    document.getElementById("id01").innerHTML = out;
}

我从一些教程网站获得了myFunction（arr），但我不知道如何使用它。请有人帮助我。

编辑我想将这些数据解析为bootstrap row div。

<div class="row" id="id01">
   <div class="col-md-4">
      <a ref="read.html?id=Id Data from json"<img src="domain.com/imagedatafromjson.png"></a>
      <p>Title from json</p>
      <p>Description from json</p>
   </div>
   <div class="col-md-4">
      <a ref="read.html?id=Id Data from json"<img src="domain.com/imagedatafromjson.png"></a>
      <p>Title from json</p>
      <p>Description from json</p>
   </div>
   <div class="col-md-4">
      <a ref="read.html?id=Id Data from json"<img src="domain.com/imagedatafromjson.png"></a>
      <p>Title from json</p>
      <p>Description from json</p>
   </div>
</div>

我尝试使用你的解决方案，但它不起作用，或者我只是对此不熟悉。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
    <div class="row" id="id01">

    </div>
</div>
<script>
var text = '[
   {
      "id":"1",
      "title":"Lorem Ispun",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
      "imglocation":"files\/c1.png"
   },
   {
      "id":"2",
      "title":"Lorem Ispun",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
      "imglocation":"files\/c2.png"
   },
   {
      "id":"3",
      "title":"Lorem Ispun",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
      "imglocation":"files\/c3.png"
   },
   {
      "id":"4",
      "title":"Lorem Ispun",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
      "imglocation":"files\/c4.png"
   },
   {
      "id":"5",
      "title":"Lorem Ispun",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
      "imglocation":"files\/c5.png"
   },
   {
      "id":"6",
      "title":"Lorem Ispun",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
      "imglocation":"files\/c6.png"
   }
]}';
var obj = JSON.parse(text);
myFunction(obj);
function myFunction(arr) {
    container = document.getElementById("id01");
    for (item of arr) {
        var div = document.createElement('div');
        var a = document.createElement('a');
        var img = document.createElement('img');
        var p1 = document.createElement('p');
        var p2 = document.createElement('p');

        div.className = 'col-md-4';
        a.href = 'read.html?id=' + item.id;
        img.src = 'domain.com/' + item.imglocation;
        p1.textContent = item.title;
        p2.textContent = item.description;

        a.appendChild(img);
        div.appendChild(a);
        div.appendChild(p1);
        div.appendChild(p2);

        container.appendChild(div);
    }
}
</script>
</body>
</html>

Answer 1

您可以使用此函数使用DOM API来创建和添加元素：

function myFunction(arr) {
    container = document.getElementById("id01");
    for (item of arr) {
        var div = document.createElement('div');
        var a = document.createElement('a');
        var img = document.createElement('img');
        var p1 = document.createElement('p');
        var p2 = document.createElement('p');

        div.className = 'col-md-4';
        a.href = 'read.html?id=' + item.id;
        img.src = 'domain.com/' + item.imglocation;
        p1.textContent = item.title;
        p2.textContent = item.description;

        a.appendChild(img);
        div.appendChild(a);
        div.appendChild(p1);
        div.appendChild(p2);

        container.appendChild(div);
    }
}

请务必将此代码放在文档末尾，就在</body>之前。

这是一个工作片段：

var myJson =`[
        {
            "id":"1",
            "title":"SAP MONSON",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c1.png"
        },
        {
            "id":"2",
            "title":"IIBA CETERFICATION",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c2.png"
        },
        {
            "id":"3",
            "title":"ANDROID CETERFICATION",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c3.png"
        },
        {
            "id":"4",
            "title":"MIA - BEGGINING FINANCE",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c4.png"
        },
        {
            "id":"5",
            "title":"HR DF CONFERENCE",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c5.png"
        },
        {
            "id":"6",
            "title":"SUCCESS WORKSHOP",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons",
            "imglocation":"files\/c6.png"
        }
    ]`;

var obj = JSON.parse(myJson);

myFunction(obj);

function myFunction(arr) {
    var container = document.getElementById("id01");
    for (item of arr) {
        var div = document.createElement('div');
        var a = document.createElement('a');
        var img = document.createElement('img');
        var p1 = document.createElement('p');
        var p2 = document.createElement('p');
        
        div.className = 'col-md-4';
        a.href = 'read.html?id=' + item.id;
        img.src = 'domain.com/' + item.imglocation;
        p1.textContent = item.title;
        p2.textContent = item.description;
        
        a.appendChild(img);
        div.appendChild(a);
        div.appendChild(p1);
        div.appendChild(p2);
        
        container.appendChild(div);
    }
}

<div class="row" id="id01">
</div>

Answer 2

str="";
for (var obj in myJson) {
    str += "<div class='col-md-4'>
    +"<a ref='read.html?id='"+obj.id+"'><img src='domain.com/"
    +obj.imglocation+"'></a>"
    +"<p>"+obj.title+"</p>"
    +"<p>"+obj.description+"</p>"
    +"</div>";
}
document.getElementById("#id01").html(str);

如何解析这种类型的json到bootstrap网格

2 个答案: