Question

已经有几个星期我一直在尝试寻找不同的解决方案，但无法使其正常工作。从fiverr雇用了几个人，但这确实是在浪费时间。这是我在寻找的东西：我在服务器中有json数据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());

当然，如果我更新整个页面的内容就可以很好地工作，但是我的要求是，当用户登录会话时，这些整个页面的更新都无法进行，这就是为什么我需要更新每个唯一的原因ID。

我希望有人能帮助我。我将很高兴为任何对此有所了解的人买咖啡。

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字符串，我们可以调整Fiddle示例。我已经用您在评论中提供的数据更新了小提琴。

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

New Fiddle

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

1 个答案: