从 JSON 数据替换 HTML 标签中的商品价格

发布于 2024-10-20 10:59:26 字数 574 浏览 7 评论 0原文

我有一个非常简单的问题，但我就是无法弄清楚。我的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 值。我不需要一个执行循环之类的“超灵活”脚本。它必须非常简单。

预先非常感谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏天碎花小短裙 2024-10-27 10:59:26

假设您使用 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;

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;

回复收藏 0 原文

柠栀 2024-10-27 10:59:26

您还应该将prices.xml重命名为prices.json，并检查您的网络服务器是否将正确的mime类型放入文件中。这并不是绝对必要的，但一年后，当下一个人来查看这段代码时，他们会想知道为什么 xml 文件中有 json。

回复收藏 0 原文

久光 2024-10-27 10:59:26

使用 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];

Use a JSON library, or use eval as your data seems safe,See it work here:
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];

回复收藏 0 原文

~没有更多了~