Заменить цены товара в тегах HTML из данных JSON

Question

У меня очень простая проблема, но я просто не могу ее понять.Мои знания Javascript немного устарели: -)

Вот мои данные JSON (хранятся в файле Prices.xml)

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

Вот мой 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>

Все, что мне действительно нужно, это javascript (без jquery, если это возможно), который извлекает значения из цен .xml и заменяет значения SPAN.Мне не нужен «сверхгибкий» скрипт, который делает циклы и все такое.Это должно быть очень просто.

Большое спасибо заранее

Answer 1

Предполагается, что вы используете jQuery для запроса AJAX.

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

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

Если вы не используете jQuery или AJAX, вам необходимо присвоить объекту переменную для ссылки на них.

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;

Answer 2

Вы также должны переименовать цен.xml в ценах.json и убедиться, что ваш веб-сервер поместит в файл правильный тип пантомимы. Это не является строго необходимым, но через год, когда следующий парень придет, чтобы просмотреть этот код, они будут удивлены, почему в XML-файле есть json.

Answer 3

Используйте библиотеку JSON или eval, поскольку ваши данные кажутся безопасными. Смотрите, как это работает здесь: http://jsfiddle.net/m6qW7/2/

var myPrices = '{ "prices": { "bananas": "2,39","apples": "3,39" }}';
 // string data you got as json

 // added "s" to your span ids for consistency
 var myPricesObj = eval( "(" + myPrices + ")" );
 var prices = myPricesObj["prices"];
 for(fruit in prices)
     document.getElementById(fruit + "price").innerHTML = prices[fruit];