How to insert Json Data into Html Divs?

This is my json file "contact.json"

[

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

]

What I try to achieve is to read this file with javascript (+jquery) populate html divs (based on number of contacts) and place the name and surname in divs.

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Here what I have written so far;

load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.getJSON("contact.json", function (data) {

    $.each(data, function (index, value) {

       console.log(value);

       name.innerHTML= value.name;

       surname.innerHTML= value.surname;





    });

});

So I can get the contacts write them in console how ever I cant pass them into innerHTML and dont know how to populate Html divs called "box".

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

asked Nov 20 '18 at 22:40

user1953051

20111

1

Have you heard of anything like EJS... Moustache... etc? ... They're basically JS template tools, or you could use one I've batched up prior to now?

– JO3-W3B-D3V
Nov 20 '18 at 22:46

add a comment |

This is my json file "contact.json"

[

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

]

What I try to achieve is to read this file with javascript (+jquery) populate html divs (based on number of contacts) and place the name and surname in divs.

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Here what I have written so far;

load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.getJSON("contact.json", function (data) {

    $.each(data, function (index, value) {

       console.log(value);

       name.innerHTML= value.name;

       surname.innerHTML= value.surname;





    });

});

So I can get the contacts write them in console how ever I cant pass them into innerHTML and dont know how to populate Html divs called "box".

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

asked Nov 20 '18 at 22:40

user1953051

20111

1

Have you heard of anything like EJS... Moustache... etc? ... They're basically JS template tools, or you could use one I've batched up prior to now?

– JO3-W3B-D3V
Nov 20 '18 at 22:46

add a comment |

This is my json file "contact.json"

[

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

]

What I try to achieve is to read this file with javascript (+jquery) populate html divs (based on number of contacts) and place the name and surname in divs.

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Here what I have written so far;

load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.getJSON("contact.json", function (data) {

    $.each(data, function (index, value) {

       console.log(value);

       name.innerHTML= value.name;

       surname.innerHTML= value.surname;





    });

});

So I can get the contacts write them in console how ever I cant pass them into innerHTML and dont know how to populate Html divs called "box".

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

asked Nov 20 '18 at 22:40

user1953051

20111

This is my json file "contact.json"

[

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

]

What I try to achieve is to read this file with javascript (+jquery) populate html divs (based on number of contacts) and place the name and surname in divs.

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Here what I have written so far;

load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.getJSON("contact.json", function (data) {

    $.each(data, function (index, value) {

       console.log(value);

       name.innerHTML= value.name;

       surname.innerHTML= value.surname;





    });

});

So I can get the contacts write them in console how ever I cant pass them into innerHTML and dont know how to populate Html divs called "box".

javascript html json

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

asked Nov 20 '18 at 22:40

user1953051

20111

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

asked Nov 20 '18 at 22:40

user1953051

20111

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

edited Nov 21 '18 at 8:32

Ashish Kamble

632519

asked Nov 20 '18 at 22:40

user1953051

20111

asked Nov 20 '18 at 22:40

user1953051

20111

asked Nov 20 '18 at 22:40

user1953051

20111

1

Have you heard of anything like EJS... Moustache... etc? ... They're basically JS template tools, or you could use one I've batched up prior to now?

– JO3-W3B-D3V
Nov 20 '18 at 22:46

add a comment |

1

Have you heard of anything like EJS... Moustache... etc? ... They're basically JS template tools, or you could use one I've batched up prior to now?

– JO3-W3B-D3V
Nov 20 '18 at 22:46

Have you heard of anything like EJS... Moustache... etc? ... They're basically JS template tools, or you could use one I've batched up prior to now?

– JO3-W3B-D3V
Nov 20 '18 at 22:46

add a comment |

3 Answers
3

active

oldest

votes

You have to create elements through your js in next way:

document.createElement('div')

document.createElement('h3')

To change text there you use

block.innerHTML = "Put your code here"

And to fill it with other blocks you use

block.appendChild(otherBlock)

Here's small example, hope it will help you: https://codepen.io/anon/pen/jQGBdm

answered Nov 20 '18 at 22:55

Nikita

614

add a comment |

One possible fix:

var myDiv = document.createElement("div");   

myDiv.innerHTML = "<h3>" + value.name + "</h3> 

               <h3>" + value.surname + "</h3>"   



document.body.appendChild(myDiv);

UPDATE: (best practice)

var markup = `

<div class="box">

       <h3 class="name">${value.name}</h3>

       <h3 class="surname">${value.surname}</h3>                         

 </div>

`;



document.body.innerHTML = markup;

edited Nov 21 '18 at 6:34

Rai

842620

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

add a comment |

Give Id to the parent div say container, create dynamic h3 elements and append it to parent div

HTML:

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3" id="container">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Jquery:

var data = [

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

];



load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.each(data, function (index, value) {

        var parent = document.createElement('div');

      parent.className = 'box';

      var $name = $('<h3 class="name">').text(value.name);

      var $surname = $('<h3 class="surname">').text(value.surname);

      $name.appendTo(parent);

      $surname.appendTo(parent);

      $(parent).appendTo($('#container'));

    });

}

JSFiddle

edited Nov 22 '18 at 5:54

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402678%2fhow-to-insert-json-data-into-html-divs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You have to create elements through your js in next way:

document.createElement('div')

document.createElement('h3')

To change text there you use

block.innerHTML = "Put your code here"

And to fill it with other blocks you use

block.appendChild(otherBlock)

Here's small example, hope it will help you: https://codepen.io/anon/pen/jQGBdm

answered Nov 20 '18 at 22:55

Nikita

614

add a comment |

You have to create elements through your js in next way:

document.createElement('div')

document.createElement('h3')

To change text there you use

block.innerHTML = "Put your code here"

And to fill it with other blocks you use

block.appendChild(otherBlock)

Here's small example, hope it will help you: https://codepen.io/anon/pen/jQGBdm

answered Nov 20 '18 at 22:55

Nikita

614

add a comment |

You have to create elements through your js in next way:

document.createElement('div')

document.createElement('h3')

To change text there you use

block.innerHTML = "Put your code here"

And to fill it with other blocks you use

block.appendChild(otherBlock)

Here's small example, hope it will help you: https://codepen.io/anon/pen/jQGBdm

answered Nov 20 '18 at 22:55

Nikita

614

You have to create elements through your js in next way:

document.createElement('div')

document.createElement('h3')

To change text there you use

block.innerHTML = "Put your code here"

And to fill it with other blocks you use

block.appendChild(otherBlock)

Here's small example, hope it will help you: https://codepen.io/anon/pen/jQGBdm

answered Nov 20 '18 at 22:55

Nikita

614

answered Nov 20 '18 at 22:55

Nikita

614

answered Nov 20 '18 at 22:55

Nikita

614

answered Nov 20 '18 at 22:55

Nikita

614

add a comment |

One possible fix:

var myDiv = document.createElement("div");   

myDiv.innerHTML = "<h3>" + value.name + "</h3> 

               <h3>" + value.surname + "</h3>"   



document.body.appendChild(myDiv);

UPDATE: (best practice)

var markup = `

<div class="box">

       <h3 class="name">${value.name}</h3>

       <h3 class="surname">${value.surname}</h3>                         

 </div>

`;



document.body.innerHTML = markup;

edited Nov 21 '18 at 6:34

Rai

842620

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

add a comment |

One possible fix:

var myDiv = document.createElement("div");   

myDiv.innerHTML = "<h3>" + value.name + "</h3> 

               <h3>" + value.surname + "</h3>"   



document.body.appendChild(myDiv);

UPDATE: (best practice)

var markup = `

<div class="box">

       <h3 class="name">${value.name}</h3>

       <h3 class="surname">${value.surname}</h3>                         

 </div>

`;



document.body.innerHTML = markup;

edited Nov 21 '18 at 6:34

Rai

842620

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

add a comment |

One possible fix:

var myDiv = document.createElement("div");   

myDiv.innerHTML = "<h3>" + value.name + "</h3> 

               <h3>" + value.surname + "</h3>"   



document.body.appendChild(myDiv);

UPDATE: (best practice)

var markup = `

<div class="box">

       <h3 class="name">${value.name}</h3>

       <h3 class="surname">${value.surname}</h3>                         

 </div>

`;



document.body.innerHTML = markup;

edited Nov 21 '18 at 6:34

Rai

842620

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

One possible fix:

var myDiv = document.createElement("div");   

myDiv.innerHTML = "<h3>" + value.name + "</h3> 

               <h3>" + value.surname + "</h3>"   



document.body.appendChild(myDiv);

UPDATE: (best practice)

var markup = `

<div class="box">

       <h3 class="name">${value.name}</h3>

       <h3 class="surname">${value.surname}</h3>                         

 </div>

`;



document.body.innerHTML = markup;

edited Nov 21 '18 at 6:34

Rai

842620

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

edited Nov 21 '18 at 6:34

Rai

842620

edited Nov 21 '18 at 6:34

Rai

842620

edited Nov 21 '18 at 6:34

Rai

842620

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

answered Nov 20 '18 at 23:02

Denis Kovzelyuk

716

add a comment |

Give Id to the parent div say container, create dynamic h3 elements and append it to parent div

HTML:

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3" id="container">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Jquery:

var data = [

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

];



load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.each(data, function (index, value) {

        var parent = document.createElement('div');

      parent.className = 'box';

      var $name = $('<h3 class="name">').text(value.name);

      var $surname = $('<h3 class="surname">').text(value.surname);

      $name.appendTo(parent);

      $surname.appendTo(parent);

      $(parent).appendTo($('#container'));

    });

}

JSFiddle

edited Nov 22 '18 at 5:54

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

add a comment |

Give Id to the parent div say container, create dynamic h3 elements and append it to parent div

HTML:

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3" id="container">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Jquery:

var data = [

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

];



load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.each(data, function (index, value) {

        var parent = document.createElement('div');

      parent.className = 'box';

      var $name = $('<h3 class="name">').text(value.name);

      var $surname = $('<h3 class="surname">').text(value.surname);

      $name.appendTo(parent);

      $surname.appendTo(parent);

      $(parent).appendTo($('#container'));

    });

}

JSFiddle

edited Nov 22 '18 at 5:54

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

add a comment |

Give Id to the parent div say container, create dynamic h3 elements and append it to parent div

HTML:

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3" id="container">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Jquery:

var data = [

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

];



load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.each(data, function (index, value) {

        var parent = document.createElement('div');

      parent.className = 'box';

      var $name = $('<h3 class="name">').text(value.name);

      var $surname = $('<h3 class="surname">').text(value.surname);

      $name.appendTo(parent);

      $surname.appendTo(parent);

      $(parent).appendTo($('#container'));

    });

}

JSFiddle

edited Nov 22 '18 at 5:54

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

Give Id to the parent div say container, create dynamic h3 elements and append it to parent div

HTML:

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <meta name="description" content="Test">

        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



        <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript" src="people.json"></script>

    </head>

    <body>



     <section id="contacs">

       <div class="grid-3" id="container">               

            <div class="box">

                   <h3 class="name"></h3>

                   <h3 class="surnamename"></h3>                         

             </div>                               

       </div>

     </section>  

  </body>

</html>

Jquery:

var data = [

   {

      "name":"Alice",

      "surname":"Smith"

   },

   {

     "name":"Bob",

      "surname":"Walter"

   }

];



load();



function load(){



var name=document.querySelector(".name");

var surname=document.querySelector(".surname");



    $.each(data, function (index, value) {

        var parent = document.createElement('div');

      parent.className = 'box';

      var $name = $('<h3 class="name">').text(value.name);

      var $surname = $('<h3 class="surname">').text(value.surname);

      $name.appendTo(parent);

      $surname.appendTo(parent);

      $(parent).appendTo($('#container'));

    });

}

JSFiddle

edited Nov 22 '18 at 5:54

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

edited Nov 22 '18 at 5:54

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

answered Nov 22 '18 at 5:47

SpiderCode

7,85811539

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu