CODEWITHSUNDEEP
javascripthtmljson
Leo Lyons
Leo Lyons

Reputation: 41

I am trying to have javascript replace data from a JSON file in an HTML File

JSON {"benefits": [ { "title": "Free", "description": "Members receive free shipping" }, { "title": "Delivery", "description": "Your ride will always be in delivered" }, { "title": "News", "description": "A Bi-Weekly newsletter" } ] }

JAVASCRIPT

var benefitsVar = document.getElementById("memberBenefits");
or (var l=0; l < dataPull.benefits.length; l++){

benefitsVar[l].getElementsByTagName('h4')[0].innerHTML = 
dataPull.benefits[l].title;
benefitsVar[l].getElementsByTagName('p')[0].innerHTML = 
dataPull.benefits[l].description;

};

HTML

<section id="memberBenefits">

<ul>
  <li > <h4 class="benefits">Lorem Ipsum</h4></li>
 <li> <p class="benefits">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor </p></li>
</ul>
<ul>
 <li> <h4 class="benefits">Lorem Ipsum</h4></li>
<li><p class="benefits">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor </p></li>
</ul>

<ul>
    <li> <h4 class="benefits">Lorem Ipsum</h4></li>
    <li ><p class="benefits">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor </p></li>

</ul></section>

Upvotes: 2

Views: 48

Answers (1)

node_man
node_man

Reputation: 1449

Here's how you do it using ajax :

Note : I don't understand why you don't want to use jquery.It won't harm if you use jquery. Use jquery for the ajax thing and use javascript for the other things : 

$.ajax({
    url: 'http://localhost/data.json',
    crossDomain:true,
    dataType: 'json',             
    success: function(data){
    var newData = '';
    var i;
    for(i=0; i<benefits.length; i++){
     newData +='<ul>'+
    '<li > <h4 class="benefits">'+benefits[i].title+'</h4></li>'+
    '<li ><p class="benefits">'+benefits[i].description+' </p></li>'+
    '</ul>';

    }
$('#memberBenefits').html(newData);
    },
    error: function(){
        console.log('Could not get Data from the file');
    }
});

Your html :

<section id="memberBenefits">


</section>

Upvotes: 1

Related Questions