Question

我正在尝试实现一种从输入框获取数据并将数据发送到json数组的方法，我实现了它，但是在推送新数组时删除了数组中的先前数据。我希望所有数据都存储在json数组中。如何在javascript或jquery中实现此目的。下面是我尝试过的。

<script>
  $(document).ready(() => {
    $('#submit').click(() => {
      var objKey = 0;
      var person = [];

      var name = $('#name').val();
      var age = $('#age').val();
      var address = $('#address').val();
      objKey++;
      var obj = {
        'id': objKey,
        'name': name,
        'age': age,
        'address': address
      }

      var hasMatch = false;

      if (name === '' || age === '' || address === '') {
        alert('Fields should not be null');
        return false;
      } else {
        var index = 0;
        if (index < person.length) {
          ++index

          var animal = person[index];

          if (animal.name == obj.name) {
            hasMatch = true;
            alert('oops');
            return false;
          } else {
            person.push(obj);
            buildTable(person)
            console.log(person);
            return false

          }
        } else {
          person.push(obj);
          buildTable(person)
          console.log(person);
          person += person
          return false
        }

      }

    });

    function buildTable(data) {
      var table = document.getElementById('myTable')

      for (var i = 0; i < data.length; i++) {
        var row =
          `<tr class="record">
             <td>${data[i].id}</td>
             <td>${data[i].name}</td>
             <td>${data[i].age}</td>
             <td>${data[i].address}</td>
             <td><input type="button" title="Click to remove item" value="delete" /></td>
          </tr>`
        table.innerHTML += row`enter code here`
      }
    }
  })
</script>

Answer 1

问题在于，您每次点击都会创建一个新数组。将person变量移到点击处理程序之外：

$(document).ready(() => {
  var person = [];            // <==============
  $('#submit').click(() => {
    var objKey = 0;

如果这样做，则只有一个数组，person.push将添加到该数组。

Answer 2

问题在于，单击后您将数组“ person”重新定义为一个空数组。您应该在代码中先定义它。

Answer 3

Heyo，如果我理解正确，那么问题就是您的数组：

import { Alert } from "@material-ui/lab";
import { Typography, useMediaQuery } from "@material-ui/core";
import { ShowWinner } from "./ShowWinner";
import { ErrorBoundary } from "../../../../App/ErrorBoundary";
import { GamePlayWhite } from "../../GamePlayWhite";
import { GamePlayBlack } from "../../GamePlayBlack";
import { GamePlaySpectate } from "../../GamePlaySpectate";
import React, { useEffect, useState } from "react";
import { useDataStore } from "../../../../Global/Utils/HookUtils";
import { GameDataStore } from "../../../../Global/DataStore/GameDataStore";
import { UserDataStore } from "../../../../Global/DataStore/UserDataStore";
import { IntervalDataStore } from "../../../../Global/DataStore/IntervalDataStore";
import GameStart from "../../GameStart";
import GameJoin from "../../GameJoin";
import moment from "moment";
import { ChatDataStore } from "../../../../Global/DataStore/ChatDataStore";
import { useHistory, useParams } from "react-router";
import { SiteRoutes } from "../../../../Global/Routes/Routes";
import { getTrueRoundsToWin } from "../../../../Global/Utils/GameUtils";
import { ClientGameItem } from "../../../../Global/Platform/Contract";
import { CurriedFunction1 } from "lodash";



interface Props {
    gameId: string;
}


export const GameInner: React.FC<Props> = (
    {
        gameId,
    }


) => {
    
    const gameData = useDataStore(GameDataStore);
    const userData = useDataStore(UserDataStore);
    const chatData = useDataStore(ChatDataStore);
    const params = useParams<{ throwaway?: string }>();
    const history = useHistory();
    const [updateShowTimer, setUpdateShowTimer] = React.useState('02:00');
    const [isCalled, setIsCalled] = React.useState<any>('0');
    const [intervalData, setIntervalData] = useState(null as NodeJS.Timeout | null);
    const [isGameStarted, setIsGameStarted] = React.useState<any>('0');
    let setSeconds = 30;

    const {
        dateCreated,
        started,
        chooserGuid,
        ownerGuid,
        spectators,
        pendingPlayers,
        players,
        settings,
        kickedPlayers
    } = gameData.game ?? {};

    const {
        playerGuid
    } = userData;

    const iWasKicked = !!kickedPlayers?.[playerGuid];
    const amInGame = playerGuid in (players ?? {});

    useEffect(() => {
        const playMode = params.throwaway !== "play" && started && !iWasKicked && amInGame;
        const notPlayMode = iWasKicked && params.throwaway === "play";
        if (playMode) {
            history.push(SiteRoutes.Game.resolve({
                id: gameId,
                throwaway: "play"
            }))
        }

        if (notPlayMode) {
            history.push(SiteRoutes.Game.resolve({
                id: gameId,
                throwaway: "kicked"
            }));
        }
        getUpdate();
    }, [started, iWasKicked, amInGame]);

    React.useEffect(() => {
        if(gameData?.game?.roundStarted) {
            if(isGameStarted == '0') {
                console.log("round is started");
                setIsGameStarted('1');
            }
        }
    }, [gameData]);

    

    const skipPlayer = (game_string_id: any, target_turn: any, chooserGuid: any) => {
        return GameDataStore.skipPlayer(game_string_id, target_turn, chooserGuid);
    }

    const interval = () => {
        let timer = setSeconds, minutes, seconds;

        let chooserGuid = localStorage.getItem('chooserGuid');
        let game_string_id = localStorage.getItem('game_id');
        let target_turn = localStorage.getItem('target_turn');
        let is_called = localStorage.getItem('is_called');
        
        console.log("isGameStarted : "+isGameStarted);

        if(isGameStarted == '0') {
            if (typeof timer !== undefined && timer != null) {
                minutes = parseInt(timer / 60 as any, 10);
                seconds = parseInt(timer % 60 as any, 10);
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                //console.log("test");
                console.log(minutes + ":" + seconds);

                setUpdateShowTimer(minutes+":"+seconds);

                if (timer == 0) {
                    skipPlayer(game_string_id, target_turn, chooserGuid);
                    if(intervalData != undefined && intervalData!== null)
                    clearInterval(intervalData);
                }

                if (--timer < 0) {
                    if(intervalData != undefined && intervalData!== null)
                    clearInterval(intervalData);
                }
                setSeconds -= 1;
            }
        }
    }   

    const startTimer = () => {
        console.log("called again");
        //interval_counter = setInterval(interval,1000);
        setIntervalData(setInterval(interval,1000));
    }

    const getUpdate = () => {
        if(gameData?.game?.players && gameData?.game?.id) {
            let game_id = gameData.game.id;
            let all_players = gameData.game.players;
            let all_player_id = Object.keys(all_players);
            let filteredAry = all_player_id.filter(e => e !== userData.playerGuid);
    
            console.log("user player guid:"+userData.playerGuid);
            console.log("guid:"+chooserGuid);   
            console.log("all players:"+all_player_id);  
            console.log("new array:"+filteredAry);
    
            let target_item = filteredAry.find((_, i, ar) => Math.random() < 1 / (ar.length - i));
            if(typeof target_item !== undefined && target_item!=null) {
                localStorage.setItem('target_turn',target_item);
            }
    
            localStorage.setItem('is_started','0');
            if(typeof game_id !== undefined && game_id!=null) {
                localStorage.setItem('game_id',game_id);
            }
            if(typeof chooserGuid !== undefined && chooserGuid!=null) {
                localStorage.setItem('chooserGuid',chooserGuid);
            }
            if(isChooser) {
                if(isCalled == '0') {
                    setIsCalled("1");
                    startTimer();
                }
            } else {
                //clearInterval(intervalData);
            }
        }
    }

    const isOwner = ownerGuid === userData.playerGuid;
    const isChooser = playerGuid === chooserGuid;
    const amSpectating = playerGuid in { ...(spectators ?? {}), ...(pendingPlayers ?? {}) };

    const playerGuids = Object.keys(players ?? {});
    const roundsToWin = getTrueRoundsToWin(gameData.game as ClientGameItem);
    const winnerGuid = playerGuids.find(pg => (players?.[pg].wins ?? 0) >= roundsToWin);

    const inviteLink = (settings?.inviteLink?.length ?? 0) > 25
        ? `${settings?.inviteLink?.substr(0, 25)}...`
        : settings?.inviteLink;

    const meKicked = kickedPlayers?.[playerGuid];

    const tablet = useMediaQuery('(max-width:1200px)');
    const canChat = (amInGame || amSpectating) && moment(dateCreated).isAfter(moment(new Date(1589260798170)));
    const chatBarExpanded = chatData.sidebarOpen && !tablet && canChat;


    /**********************************************/
    
    /********************************************/

    

    return (
        <div style={{ maxWidth: chatBarExpanded ? "calc(100% - 320px)" : "100%" }}>
            <div style={{ minHeight: "70vh" }}>
                {iWasKicked && (
                    <Alert variant={"filled"} severity={"error"}>
                        <Typography>
                            {meKicked?.kickedForTimeout ? "You were kicked for being idle. You may rejoin this game any time!" : "You left or were kicked from this game"}
                        </Typography>
                    </Alert>
                )}
                {!winnerGuid && settings?.inviteLink && (
                    <Typography variant={"caption"}>
                        Chat/Video Invite: <a href={settings.inviteLink} target={"_blank"} rel={"nofollow noreferrer"}>{inviteLink}</a>
                    </Typography>
                )}
                {winnerGuid && (
                    <ShowWinner />
                )}
                {!winnerGuid && (
                    <ErrorBoundary>
                        {updateShowTimer} {isGameStarted}
                        {(!started || !(amInGame || amSpectating)) && (
                            <BeforeGame gameId={gameId} isOwner={isOwner} />
                        )}  
                        

                        {started && amInGame && !isChooser && ( 
                            [
                                <GamePlayWhite />
                            ]
                        )} 

                        {started && amInGame && isChooser && (
                            [
                                <GamePlayBlack />
                            ]
                        )}

                        {started && amSpectating && (
                            <GamePlaySpectate />
                        )}
                    </ErrorBoundary>
                )}
            </div>
        </div>
    );
};

每次单击“提交”按钮，

都会得到（重新）初始化。因此，您以前的数据将丢失。

尝试更改以下代码：

var person = [];

收件人：

  $(document).ready(() => {
   $('#submit').click(() => {
    var objKey = 0;
    var person = [];

通过在就绪块中声明人员，您的Submit-Event可以访问此变量。但是，每次单击按钮时都不会覆盖它。

希望这会有所帮助

有没有一种方法可以将数据存储到json数组，而无需在javascript中删除json数组中以前存储的数据？

3 个答案: