JSON解析异常及后端重复数组替换方案咨询

嘿，咱们一步步来搞定你的问题～

先解决最开始的[object Object]问题 #

你最开始的后端返回是单个JSON对象：

{ "sc_sub":"ab", "sc_sub1":"abc" }

但你用了lclObj[0].sc_sub来访问——这是把它当成数组来操作了！单个对象是没有索引[0]的，所以这里会导致错误，如果你直接把对象和字符串拼接输出（比如console.log('结果：' + lclObj)），就会显示[object Object]。

正确的访问方式应该是：

var lclObj = JSON.parse(data);
var a = lclObj.sc_sub; // 或者用方括号语法 lclObj['sc_sub']

核心问题：替换旧数组，保留新数组 #

现在后端改成逐个发送数组，你会接收到两次独立的数组数据：

[{ "sc_sub":"ab", "sc_sub1":"abc" }]

[{ "sc_sub":"ab", "sc_sub1":"abc" }]

要移除旧数组、设置新数组，本质就是用新数组直接覆盖旧的存储变量，具体分几种场景：

1. 普通原生JS（无框架） #

你可以用一个全局变量存储当前数组，每次收到新数据时直接替换：

// 初始化存储数组的变量
let currentDataArray = [];

// 处理后端返回新数组的函数
function handleReceivedData(newArray) {
  // 直接用新数组替换旧数组
  currentDataArray = newArray;
  
  // 如果需要更新页面显示，先清空旧DOM内容再渲染新内容
  const container = document.getElementById('data-display');
  container.innerHTML = ''; // 清空旧内容
  
  // 渲染新数组内容
  currentDataArray.forEach(item => {
    const itemElement = document.createElement('div');
    itemElement.textContent = `sc_sub: ${item.sc_sub}, sc_sub1: ${item.sc_sub1}`;
    container.appendChild(itemElement);
  });
}

2. React框架中 #

用useState状态管理数组，直接调用setState替换即可：

import { useState } from 'react';

function DataComponent() {
  const [dataArray, setDataArray] = useState([]);

  // 模拟接收后端数据的函数
  const fetchNewData = async () => {
    const response = await fetch('/your-api-endpoint');
    const newArray = await response.json();
    // 直接替换旧数组
    setDataArray(newArray);
  };

  return (
    <div>
      {dataArray.map((item, index) => (
        <div key={index}>
          sc_sub: {item.sc_sub}, sc_sub1: {item.sc_sub1}
        </div>
      ))}
    </div>
  );
}

3. Vue框架中 #

在data里定义数组变量，直接赋值替换即可：

<template>
  <div>
    <div v-for="(item, index) in dataArray" :key="index">
      sc_sub: {{ item.sc_sub }}, sc_sub1: {{ item.sc_sub1 }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataArray: []
    };
  },
  methods: {
    async fetchNewData() {
      const response = await this.$http.get('/your-api-endpoint');
      // 直接替换旧数组
      this.dataArray = response.data;
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者ALPHA