Question

I have a very simple problem, but I just can’t figure it out.
My Javascript knowledge is a bit rusty 🙂

Here is my JSON data (stored in a file prices.xml)

{
"prices": {
"bananas": "2,39",
"apples": "3,39"
}
}

Here is my html:

<ul>
<LI>Our price for bananas:<SPAN id="bananaprice">BANANA PRICE SHOULD GO HERE</SPAN></LI>
<LI>Our price for apples:<SPAN id="appleprice">APPLE PRICE SHOULD GO HERE</SPAN></LI>
</ul>

All i really need is a javascript (no jquery if possible) that pulls the values from the prices.xml and replaces the SPAN values.
I do not need a “hyper flexible” script that does loops and all that.
It has to be super simple.

Thank you very much in advance

Answer 1

Assuming you’re using jQuery for the AJAX request.

$.ajax({
    url: yourURL
    dataType: 'json',
    success: function( data )
    {
        var prices = data.prices;

        $('#bananaprice').text( prices.bananas );
        $('#appleprice').text( prices.apples );
    }
});

If you aren’t using jQuery or AJAX then you’d need to assign a variable to the object to reference them.

var items = {
    "prices" : {
        "bananas" : "$X.XX",
        "apples" : "$X.XX"
    }
};

var banana = document.getElementById('bananaprice'),
    apple = document.getElementById('appleprice')
    price = items.prices;

banana.innerHTML = price.bananas;
apple.innerHTML = price.apples;