JSON转HTML表格比较和警报

sxpgvts3  于 2023-11-20  发布在  其他
关注(0)|答案(3)|浏览(90)

我现在有一个AJAX请求,要从JSON文件更新一个HTML表格。我现在想要一种方法来提醒更改,提醒新添加的表项。
下面是一个如何填充HTML表的例子。我尝试将JSON请求存储到JSON.stringify中,将其存储到一个变量中,然后将其与上次运行时进行比较..没有运气,我只返回true/false,我希望比较返回新旧数据之间的差异。

function populate_table(){
                $(document).ready(function(){
                    $.getJSON("data.json", function(data){
                        var update_table = '';
                        $.each(data, function(key, value){
                            update_table += '<tr>';
                            update_table += '<td>'+value.name+'</td>';
                            update_table += '<td>'+value.date+'</td>';
                            update_table += '<td>'+value.address+'</td>';
                            update_table += '<td>'+value.phone+'</td>';
                            update_table += '</tr>';
                        });
                        $('#my_table tbody').html(update_table);
                    });
                });
            };
            populate_table(); 
            setInterval(function(){
                populate_table() 
            }, 5000);

字符串
在不改变后端JSON填充的情况下,有没有一种方法可以将新的AJAX数据与上次的数据进行比较,找到差异并发出警报?

6jjcrrmo

6jjcrrmo1#

也许你可以尝试将数据存储在localStorage中,下次当你获取数据时,你可以从最后一次Ajax调用中提取数据,并使用循环比较它们。

t1rydlwq

t1rydlwq2#

定义一个数组并将元素推入数组,然后可以将数组与新数据进行比较

var old_data = new Array;
function populate_table(){
...
old_data .push(name:value.name,
dtae:value.date,
addres: value.address,
phone:value.phone);
$('#my_table tbody').html(update_table);

字符串

oalqel3c

oalqel3c3#

Hi这个程序提供了一种比较两个对象的方法,并以用户友好的HTML表格格式呈现差异,以便于可视化。
代码

function getObjectDifferences(obj1: any, obj2: any): any {
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return obj1 !== obj2 ? [obj1, obj2] : undefined;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  const uniqueKeys = new Set([...keys1, ...keys2]);

  const differences: any = {};

  for (const key of uniqueKeys) {
    const value1 = obj1[key];
    const value2 = obj2[key];

    if (typeof value1 === 'object' && typeof value2 === 'object') {
      const nestedDifferences = getObjectDifferences(value1, value2);
      if (nestedDifferences) {
        differences[key] = nestedDifferences;
      }
    } else if (value1 !== value2) {
      differences[key] = [value1, value2];
    }
  }

  return Object.keys(differences).length === 0 ? undefined : differences;
}

function flattenObjectToCSV(obj: any, parentKey = ''): string {
  const csvRows: string[] = [];

  for (const key in obj) {
    const value = obj[key];

    if (typeof value === 'object' && !Array.isArray(value)) {
      const nestedKey = parentKey ? `${parentKey}.${key}` : key;
      csvRows.push(flattenObjectToCSV(value, nestedKey));
    } else {
      const row = `${parentKey ? `${parentKey}.${key}` : key}, ${value[0]}, ${value[1]}`;
      csvRows.push(row);
    }
  }

  return csvRows.join('\n');
}

function parseCSVToTable(csv: string | undefined): string {
  if (!csv) {
    return '<p>No changes.</p>';
  }
  const lines = csv.trim().split('\n');
  if (lines.length < 1) {
    return '<p>No changes.</p>';
  }

  const headers = ['Attribute', 'Current Value', 'New Value']//lines[0].split(',').map((header) => header.trim());
  const data = [];

  for (let i = 0; i < lines.length; i++) {
    const values = lines[i].split(',').map((value) => value.trim());
    const row: any = {};
    for (let j = 0; j < headers.length; j++) {
      row[headers[j]] = values[j];
    }
    data.push(row);
  }

  const tableRows = data.map((row) => {
    return `<tr>
      <td>${row[headers[0]]}</td>
      <td>${row[headers[1]]}</td>
      <td>${row[headers[2]]}</td>
    </tr>`;
  });

  const tableHTML = `
    <table>
      <thead>
        <tr>
          <th>${headers[0]}</th>
          <th>${headers[1]}</th>
          <th>${headers[1]}</th>
        </tr>
      </thead>
      <tbody>
        ${tableRows.join('')}
      </tbody>
    </table>
  `;

  return tableHTML;
}

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001',
  },
};

const obj2 = {
  name: 'Jane',
  age: 28,
  address: {
    city: 'San Francisco',
    zip: '94101',
  },
};

const tableHTML = parseCSVToTable(
  flattenObjectToCSV(
    getObjectDifferences(obj1, obj2)
  )
);

console.log(tableHTML);

字符串
解释
这个程式的设计目的是比较两个对象obj1obj2,并产生一个HTML表格来显示它们之间的差异。它包含数个函数来执行这些工作。让我们一步一步地来分解这个程式:

*getObjectDifferences(obj1: any, obj2: any): any:此函数接受两个对象obj1obj2,并递归地比较它们以查找差异。以下是它的工作原理:

  • 如果obj1obj2不是对象,则会检查它们是否为不同的值。如果它们不同,则会传回值为[obj1, obj2]的数组,表示差异。如果它们相同,则会传回undefined,表示没有差异。
  • 如果obj1obj2都是对象,则继续比较它们的键和值。
  • 它收集obj1obj2中的所有唯一密钥。
  • 它初始化一个空的differences对象以存储找到的差异。
  • 它会逐一查看唯一索引键,并针对每个索引键:
  • 如果obj1obj2中当前键处的值都是对象,则递归调用getObjectDifferences来比较它们。如果存在嵌套差异,则将它们添加到differences对象中。
  • 如果这些值不是对象,而且它们不同,则会在differences对象中记录差异。
  • 最后,它会检查differences对象中是否有任何差异。如果有差异,它会传回differences对象;否则,它会传回undefined
    *flattenObjectToCSV(obj: any, parentKey = ''): string:此函数接受一个对象(obj),并递归地将其拼合为CSV格式。它还为嵌套对象追加一个父键。其工作原理如下:
  • 它初始化一个数组csvRows,以存储CSV行。
  • 它会逐一查看输入对象的索引键。
  • 如果索引键的值是对象(而不是数组),则会以巢状对象递归呼叫flattenObjectToCSV,并附加父索引键(如果有的话)。
  • 如果该值不是对象,则它将构造一个CSV行,其中包含该对象中的键、第一个值和第二个值。
  • 它使用换行符连接所有CSV行以创建CSV字符串。
    *parseCSVToTable(csv: string | undefined): string:此函数接受CSV字符串(csv),并生成显示CSV数据的HTML表格。其工作原理如下:
  • 它首先检查CSV是否为undefined或空。如果是,则返回一条消息,指示“无更改”。
  • 它将CSV字符串拆分为一个行数组,并修剪任何前导或尾随空格。
  • 它会从第一行撷取信头(数据行名称),您也可以直接将它们指定为['Attribute', 'Current Value', 'New Value']
  • 它会行程剩馀的行,以建立数据列数组,并视需要分割和修剪值。
  • 它从数据中构造HTML表行。
  • 它通过用标题 Package 表结构中的行来创建HTML表。
  • 最后,它将HTML表作为字符串返回。
  • 然后该程序定义两个示例对象obj1obj2,表示两组数据。它使用getObjectDifferences计算这些对象之间的差异,使用flattenObjectToCSV将差异展平为CSV格式,并使用parseCSVToTable生成HTML表格。
  • HTML表将记录到控制台。

总之,该程序提供了一种比较两个对象的方法,并以用户友好的HTML表格格式显示差异,以便于可视化。

相关问题