Erick Watson Erick Watson - 2 months ago 6
Javascript Question

How to parse this type of json to bootstrap grid

I'm trying to parse the json data generated with mysql and php to a bootstrap based html on a row div.

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;
}


I got the myFunction(arr) from some tutorial site but I don't know how to use it.
Please someone help me.

Edit
I'd like to parse those data to a 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>


I tried using your solution but it doesnt work or I'm just to new to this.

<!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

You could use this function which uses the DOM API to create and add elements:

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);
    }
}

Make sure to put this code at the end of your document, just before </body>.

Here is a working snippet:

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>