JSON to javascript 编辑 JSON 的值

Question

我有一个 JSON 文件 (.json)。

"spinOptionArray" : [
 {"probability":100, "type": "string", "value": "SECTION 1", "resultText": "Please choose an item from Section 1"},
 {"probability":100, "type": "string", "value": "SECTION 2", "resultText": "Please choose an item from Section 2"},
 {"probability":100, "type": "string", "value": "SECTION 3", "resultText": "Please choose an item from Section 3"},
 {"probability":100, "type": "string", "value": "SECTION 4", "resultText": "Please choose an item from Section 4"},
 {"probability":100, "type": "string", "value": "SECTION 5", "resultText": "Please choose an item from Section 5"}, 
 {"probability":100, "type": "string", "value": "SECTION 6", "resultText": "Please choose an item from Section 6"}
]

如何将 JSON 文件存储为 JS 对象？因为我想通过每次单击按钮来更改 JSON 文件中的概率值。

按钮 html（在 .php 文件中）：

<button class="spinBtn" id="spinBtn">SPIN</button>

不管怎样，用这个函数调用JSON

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);
    }

Answer 1

如果我是你，那么我将使用LocalStorage 来完成此类任务。使用 localStorage，您可以轻松地

1. 使用localStorage.setItem()和JSON.stringify()存储对象的字符串版本

2. 要使用localStorage.getItem()获取字符串中的数据，使用JSON.parse()将其解析为对象

3. 根据需要进行一些修改，例如在您的情况下增加 probability 值。

4. 再次使用localStorage.setItem() 和JSON.stringify() 将修改 对象数据存储为字符串格式

用JSON.stringify()以字符串格式存储对象数据

localStorage.setItem('key_name',JSON.stringify(object));

获取字符串数据并制作对象JSON.parse()

JSON.parse(localStorage.getItem('key_name'));

var before_btn_click =  [
 {"probability":100, "type": "string", "value": "SECTION 1", "resultText": "Please choose an item from Section 1"},
 {"probability":100, "type": "string", "value": "SECTION 2", "resultText": "Please choose an item from Section 2"},
 {"probability":100, "type": "string", "value": "SECTION 3", "resultText": "Please choose an item from Section 3"},
 {"probability":100, "type": "string", "value": "SECTION 4", "resultText": "Please choose an item from Section 4"},
 {"probability":100, "type": "string", "value": "SECTION 5", "resultText": "Please choose an item from Section 5"}, 
 {"probability":100, "type": "string", "value": "SECTION 6", "resultText": "Please choose an item from Section 6"}
];

//set the initial value on localStorage
if (localStorage.getItem('spinOptionArray') === null) {
  localStorage.setItem('spinOptionArray', JSON.stringify(before_btn_click));
}

document.getElementById('spinBtn').addEventListener('click',
  function() {

    spinOptionArray = JSON.parse(localStorage.getItem('spinOptionArray'));
    result = spinOptionArray.map(function(arrayItem) {
      return {
        probability: arrayItem['probability'] += 1,
        type: arrayItem['type'],
        value: arrayItem['value'],
        resultText: arrayItem['resultText']
      };
    })
    localStorage.setItem('spinOptionArray', JSON.stringify(result));
  })

<button class="spinBtn" id="spinBtn">SPIN</button>

在此处查看工作演示：https://jsfiddle.net/pez256hh/

要查看本地存储的效果，只需按F12

打开浏览器开发工具

对于 Firefox：存储->本地存储

对于谷歌浏览器：应用程序 -> 存储 -> 本地存储