如何从JSON服务器数据中查找和替换动态ID，并使用DOM中的匹配ID进行更新

Question

已经几周了，我一直在尝试找到不同的解决方案，但无法正确工作。从Fiverr雇用了很少的东西，但实际上这是浪费时间。这是我想要的：我在服务器中有JSON DATA UPDATE_INGAME.JSON。JSON数据具有HTML字符。我需要在具有匹配动态ID的前端更新JSON数据。

客户端站点JS文件使用节点JS(套接字(，因此是实时更新。

update_ingame.json

{"update_ingame":"
 <div id="bt_1001">2</div>
 <div id="bt_1052">3</div>
 <div id="bt_1011">4</div>"
}

html dom在前端

 <div id="bt_1001">1.4</div>
 <div id="bt_1052">2.5</div>
 <div id="bt_1011">3</div>"

清楚地看到它在两者上都具有相同的ID，但是更改了JSON中的DIV中的值，我需要更新并替换正面中相应的DOM元素。ID是唯一且动态的，仅需要页面中存在的更新。

client.js这是我尝试的

var update_ingame = data.update_ingame; //data from node
var parsedIngame  = jQuery.parseHTML(update_ingame);
var bt_id = jQuery(parsedIngame).attr("id").replace("bt_", "");
console.log(bt_id);
jQuery(bt_id).html(jQuery(parsedIngame[1]).find(bt_id).html()); 

当然，如果我更新整个页面内容，它可以很好地工作ids。

我希望有人帮我。我很乐意为任何人买咖啡。

Answer 1

正如贾斯塔纳斯(Justinas(所建议的那样，如果您可以更改JSON结果，那将是最好的。那是示例3。示例1是您结果" Update_ingame"的属性是否确实假定为一个长字符串。如果假设是一系列字符串，那就是示例2。

html：

<div id="bt_1001">1.4</div>
<div id="bt_1052">2.5</div>
<div id="bt_1011">3</div>
<button id="Example1">Example 1</button>
<button id="Example2">Example 2</button>
<button id="Example3">Example 3</button>

javaScript：

var data1 = {
  "update_ingame": "<div id="bt_1001">2</div><div id="bt_1052">3</div><div id="bt_1011">4</div>"
};
var data2 = {
  "update_ingame": [
    "<div id="bt_1001">5</div>",
    "<div id="bt_1052">6</div>",
    "<div id="bt_1011">7</div>"
  ]
};
var data3 = {
  "update_ingame": [{
      "id": "bt_1001",
      "value": "8"
    },
    {
      "id": "bt_1052",
      "value": "9"
    },
    {
      "id": "bt_1011",
      "value": "10"
    },
  ]
};

$("#Example1").on("click",function(){
    var myData = data1.update_ingame.replace(/div><div/g,"div>-*-<div").split("-*-");
  var myIdValues = [];
  $.each(myData, function(i,v){
        var pair = {};  
    var myArray = v.split(">");
    pair.value = myArray[1].substring(0,1);
    pair.id = myArray[0].substring(myArray[0].search(""")+1, myArray[0].length-1);
    myIdValues.push(pair);
  });
  $.each(myIdValues, function(i,v){
    $("#"+ v.id).text(v.value);
  })

});
$("#Example2").on("click", function(){
var myData = data2.update_ingame;
var myIdValues = [];
  $.each(myData, function(i,v){
        var pair = {};  
    var myArray = v.split(">");
    pair.value = myArray[1].substring(0,1);
    pair.id = myArray[0].substring(myArray[0].search(""")+1, myArray[0].length-1);
    myIdValues.push(pair);
  });
  $.each(myIdValues, function(i,v){
    $("#"+ v.id).text(v.value);
  })
});
$("#Example3").on("click", function(){
    var myData = data3.update_ingame;
  $.each(myData, function(i,v){
    $("#"+ v.id).text(v.value);
    console.log(v)
  })
})

编辑：

现在，我们知道update_ingame的值是HTML字符串，我们可以调整小提琴样本。我已经在评论中使用了您提供的数据更新了小提琴。

html：

<div id="bt_1135310966">1.4</div>
<div id="bt_1135310974">2.5</div>
<div id="bt_1135310975">3</div>
<div id="bt_1135310976">4</div>
<button id="Example1">Example 1</button>

javaScript：

var data1 = {
  "update_ingame": "<div id="bt_1135310966">4</div><div id="bt_1135310974">2.25</div><div id="bt_1135310975">1.57</div><div id="bt_1135310976">2.2</div>"
};

$("#Example1").on("click",function(){
    var myData = $.parseHTML(data1.update_ingame);
  $.each(myData, function(i,v){
    var value = $(v).text();
    var id = $(v).attr("id");  
    $("#"+ id).text(value);
  });
});

新小提琴