用lodash更新json

Question

Actually I need to handle mysite frontend fully with json objects(React and lodash).

I am getting the initial data via an ajax call we say,

starred[] //returns empty array from server

and am adding new json when user clicks on star buton it,

starred.push({'id':10,'starred':1});

if the user clicks again the starred should be 0

current_star=_findWhere(starred,{'id':10});
_.set(curren_star,'starred',0);

but when doing console.log

console.log(starred); //returns
[object{'id':10,'starred':0}]

but actually when it is repeated the global json is not updating,while am performing some other operations the json is like,

console.log(starred); //returns
[object{'id':10,'starred':1}]

How to update the global , i want once i changed the json, it should be changed ever.Should I get any idea of suggesting some better frameworks to handle json much easier.

Thanks before!

Answer 1

I think the problem is in mutating original state. Instead of making push, you need to do the following f.e.:

var state = {
    starred: []
};

//perform push
var newItem = {id:10, starred:1};
state.starred = state.starred.concat(newItem);

console.log(state.starred); 
//{ id: 10, starred: 1 }]

var newStarred = _.extend({}, state.starred);
var curr = _.findWhere(newStarred, {id: 10});

curr.starred = 0;

state = _.extend({}, state, {starred: newStarred});

console.log(state.starred)
//{ id: 10, starred: 0 }]

To solve this in a more nice looking fashion, you need to use either React's immutability helper, or ES6 stuff, like: {...state, {starred: []}} instead of extending new object every time. Or just use react-redux =)