Create Dymanic JSON string using only Javascript

Question

I am working with the Code Canyon script Spin2Win (https://codecanyon.net/item/spin2win-wheel-spin-it-2-win-it/16337656), which uses a local JSON file to create the segments.

The part of the JSON file that control the segments has the following format.

 "segmentValuesArray" : [
   {"probability":10, "type": "string", "value": "$10^Coupon", "win": true, "resultText": "You won a $10 Coupon", "userData": {"score":0}},

   {"probability":30, "type": "string", "value": "Lose", "win": false, "resultText": "Thank you for Playing", "userData": {"score":0}},

   {"probability":5, "type": "string", "value": "$25^Coupon", "win": true, "resultText": "You won a $25 Coupon", "userData": {"score":0}},

   {"probability":30, "type": "string", "value": "Lose", "win": false, "resultText": "Thank you for Playing", "userData": {"score":0}},

   {"probability":2, "type": "string", "value": "Free Spin", "win": true, "resultText": "You Won a Free Spin", "userData": {"score":0}},

   {"probability":30, "type": "string", "value": "Lose", "win": false, "resultText": "Thank you for Playing", "userData": {"score":0}},

   {"probability":3, "type": "string", "value": "SWAG", "win": true, "resultText": "You won SWAG", "userData": {"score":0}},

   {"probability":30, "type": "string", "value": "Lose", "win": false, "resultText": "Thank you for Playing", "userData": {"score":0}},

   {"probability":1, "type": "string", "value": "GOOGLE^Home", "win": true, "resultText": "You won a Google Home", "userData": {"score":0}}
  ],

My issues is I have a $50 and $100 coupon as well that will have lower probability values. But I only ever want 2 coupons on the wheel at any given time. So my thought was to pick a coupon value at random and then use a find and replace to update to the two coupon segements before the spin script processes the json.

I have tested and I can add an ID tag to the segmentValueArrary such as follows:

 {"id":"01", "probability":10, "type": "string", "value": "$10^Coupon", "win": true, "resultText": "You won a $10 Hosting Coupon", "userData": {"score":0}},

I have found this answer: JSON Object array inside array find and replace in javascript

But it only gives an example of how to replace one value and I need to replace the probability, value and the resultText Any attempts to modify the code find and replace code has failed.

***** UPDATE #1 *****

I have played around with a little bit of code and gotten to work in Jsfiddle. (http://jsfiddle.net/6347s9bo/)

The issues I am running into now is how the developer loads and processes the JSON. Here is his code

   loadJSON(function(response) {
     // Parse JSON string to an object
     var jsonData = JSON.parse(response);
     ........

And here is his loadJSON function

  function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', './wheel_data.json', true); 
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      //Call the anonymous function (callback) passing in the response
      callback(xobj.responseText);
    }
  };
  xobj.send(null);
 }

The error I am getting now is object.map is not a function. I am placing my findAndReplace() call after his JSON.parse call, which should turn the text into an object.

Not sure what I am missing

score 0 · Answer 1 · answered Jan 09 '18 at 21:41

you could try this:

function changeAttributes(objArray, objId, probability, value, resultText) {
    objArray.forEach(function(obj) {
        if (obj.id === objId) {
            obj.probability= probability;
            obj.value = value;
            obj.resultText = resultText;
        }
    });
}

The objId is the Id of the object in the Array you want to replace. The 3 values are the new values you want to set. You have to call the method 2 times, one time for every coupon to replace the attribuites.

score 0 · Answer 2 · answered Jan 09 '18 at 21:41

Not sure to understand your question exactly. JSON is basically a javascript array. So updating it do not require to convert it to a string. Finding a value in an array is pretty simple. In your case, simply create a function like this :

function isCoupon(item) {
    return item.id === '01';
}

then search it like this :

arrayItem = segmentValuesArray.find(isCoupon);
arrayItem.value.replace('10^','100^');

score 0 · Answer 3 · answered Jan 09 '18 at 21:50

So I would iterate over the list and mutate the coupons accordingly. You will have to add extra logic to handle selecting which coupon at random you are selecting but I think this gives a place to start.

segmentValuesArray.forEach(segment => {
  if (segment.value.includes("Coupon")) {
     segment.probability = 0;
     segment.resultText = '';
  }
});

reference on includes:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes

reference on forEach:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Create Dymanic JSON string using only Javascript

3 Answers3