按钮单击时在JSON中存储值

时间:2013-09-03 05:29:48

标签: javascript jquery html json

我是JSON的新手,我正在尝试使用JSON保存数据。当我们点击按钮时,我有一个带有一些按钮的元素列表我希望相应的按钮值保存在JSON中。我也想比较JSON中已经存在的标题。

演示Here

4 个答案:

答案 0 :(得分:1)

您只需使用for循环来检查具有该标题的元素是否已存在:

function alreadyAdded(itemTitle) {
    for (var i = 0; i < objArray.length; i++) {
        if (objArray[i].title === itemTitle) {
            return true;
        }
    }
    return false;
};

此外,您没有使用json对象,只是一个JavaScript数组。

Demo

答案 1 :(得分:0)

我假设您要将值存储在数组中,并且在按钮单击期间,您要检查该项是否已存在于数组中。如果是这样,那么您可以使用以下代码 -

var counter = 0;
var jsonObj = []; //declare object 

$('.imgbtn').click(function () {
    var title = $(this).parent().parent().find('span').html();
    var image = $(this).parent().parent().find('img').prop('src');
    var match = $.grep(jsonObj, function (e) { 
        return e.title == title; 
    });

    if (match.length > 0) {
        // This title already exists in the object.
        // Do whatever you want. I am simply returning.
        return;
    }

    counter++;
    $('#lblCart').html(counter);
    jsonObj.push({
        id: counter,
        title: title,
        image: image,
        description: 'Example'
    });
});

请注意,我已在回调函数之外声明了数组。这可确保回调的所有调用都在同一个数组对象上进行。在回调中声明它只是使它可用于单个回调调用。

另请注意,您只是使用数组来存储纯JavaScript对象。

Demo

答案 2 :(得分:0)

试试这个 http://jsfiddle.net/Z3v4g/

var counter = 0;
var jsonObj = []; //declare object

    $('.imgbtn').click(function () {

        var title = $(this).parent().parent().find('span').html();
        var image = $(this).parent().parent().find('img').prop('src');

        for( var i=0; i<jsonObj.length; i++){
           if( jsonObj[i].title == title ) return false;
        };

        counter++;
        $('#lblCart').html(counter);

        jsonObj.push({
           id: counter,
           title: title,
           image: image,
           description: 'Example'
           });
        });

答案 3 :(得分:0)

首先:

var jsonObj = []; //declare object

这不是JSON。这是一个数组。 JSON只是Javascript对象的表示法。要声明一个对象,你应该这样做:

var jsonObj = {};

或:

var jsonObj = new Object();

在此之后,您可以接近您的要求:

var counter = 0;
var jsonObj = new Object();

$('.imgbtn').click(function () {
   var title = $(this).parent().parent().find('span').html();
   var image = $(this).parent().parent().find('img').prop('src');    
   if (!(title in jsonObj)) { // if item is not in the object, (title in jsonObj) returns true of false
       jsonObj[title] = { // When you have hundreds of items, this approach is way faster then using FOR loop, and if you need to alter the item or get one value, you can just call it by name: jsonObj['ABC'].image will return the path of the image
           id: counter,
           image: image,
           description: 'Example'
       }
       counter++;
       $('#lblCart').html(counter);
   } else {
       // Do what you want if the item is already in the list
       alert('Item already in the list');
       console.log(jsonObj[title]);
   }
});

不要使用FOR循环来做你想做的事情,如果计数器变高,它只会减慢你的应用程序。