0

I'm fetching the data from api each 3 seconds, and got an array of objects from there, the number of objects can change, and the order of objects can change. I need to compare the old array and the new one, and if the number of objects, or the order of objects changed, I need to map the array and make a new copy of it in the strict order, if the objects are equal by id, and if there is a new object, push it to the end of the array, so the order should allways be the same.

Array example:

[
0: {id: "GLK3-20", cabSN: "GLK3-20", AllowSelect: true, CarColor: "белый", CarModel: "Лада Приора"}
1: {id: "EYSK-4096", cabSN: "EYSK-4096", AllowSelect: true, CarColor: "серебристо-серо-чёрный", CarModel: "ВАЗ 21140"}
2: {id: "EYSK-4023", cabSN: "EYSK-4023", AllowSelect: true, CarColor: "бежевый", CarModel: "Хёнде акцент"}
3: {id: "GLK3-180", cabSN: "GLK3-180", AllowSelect: true, CarColor: "белый", CarModel: "Лада Гранта"}
4: {id: "EYSK-4078", cabSN: "EYSK-4078", AllowSelect: true, CarColor: "синий", CarModel: "лада гранта"}
5: {id: "EYSK-4006", cabSN: "EYSK-4006", AllowSelect: true, CarColor: "белый", CarModel: "Лада Самара"}
6: {id: "GLK3-262", cabSN: "GLK3-262", AllowSelect: false, CarColor: "серебристый", CarModel: "Хёндэ матрикс "}
7: {id: "GLK3-151", cabSN: "GLK3-151", AllowSelect: true, CarColor: "ярко-зеленый", CarModel: "ВАЗ 21099"}
8: {id: "GLK3-253", cabSN: "GLK3-253", AllowSelect: true, CarColor: "белый", CarModel: "Лада Приора"}
9: {id: "GLK-114", cabSN: "GLK-114", AllowSelect: true, CarColor: "серый", CarModel: "Сузуки свифт"}
10: {id: "EYSK-4114", cabSN: "EYSK-4114", AllowSelect: true, CarColor: "серый", CarModel: "Хёнде Тражет"}
11: {id: "EYSK-4038", cabSN: "EYSK-4038", AllowSelect: true, CarColor: "белый", CarModel: "Рено логан"}
12: {id: "GLK3-309", cabSN: "GLK3-309", AllowSelect: true, CarColor: "белый", CarModel: "Киа Рио"}
13: {id: "GLK3-131", cabSN: "GLK3-131", AllowSelect: true, CarColor: "белый", CarModel: "Лада 2110"}
14: {id: "GLK3-135", cabSN: "GLK3-135", AllowSelect: true, CarColor: "белый", CarModel: "Рено каптюр"}
15: {id: "GLK3-224", cabSN: "GLK3-224", AllowSelect: true, CarColor: "жёлтый", CarModel: "Джили Эмгранд"}
16: {id: "GLK3-211", cabSN: "GLK3-211", AllowSelect: true, CarColor: "белый", CarModel: "Сузуки Вагон"}
17: {id: "EYSK-4089", cabSN: "EYSK-4089", AllowSelect: true, CarColor: "серебристый", CarModel: "Хёнде акцент"}
18: {id: "EYSK-4009", cabSN: "EYSK-4009", AllowSelect: true, CarColor: "белый", CarModel: "Шевроле круз"}
19: {id: "NVR-2001", cabSN: "NVR-2001", AllowSelect: true, CarColor: "белый", CarModel: "Лада ларгус"}
20: {id: "GLK3-217", cabSN: "GLK3-217", AllowSelect: true, CarColor: "светло-серый", CarModel: "Рено Сандеро"}
21: {id: "GLK3-237", cabSN: "GLK3-237", AllowSelect: true, CarColor: "серо-синий", CarModel: "Ниссан Вингроад"}
22: {id: "GLK3-227", cabSN: "GLK3-227", AllowSelect: true, CarColor: "белый", CarModel: "Лада калина"}
23: {id: "GLK3-289", cabSN: "GLK3-289", AllowSelect: true, CarColor: "белый", CarModel: "Киа Рио"}
]

I tried to compare prevState:

state = { cars: [] };

    request(that) {
        const { setItems } = that.props;
        axios.get("http://taxi/cabsformetrasite").then(({ data }) => {
            const cars = values(data.carsList);
            this.setState(prevState => ({ cars: update(prevState.cars, { $set: cars }) }));
            setItems(this.state.cars);
            setTimeout(() => {
                that.request(that);
                this.setPath();
            }, 3000);
        });
    }

But it not worked, now I'm trying to map the array and fix the order but can not compare the ids:

request(that) {
        const { setItems } = that.props;
        axios.get("http://taxi/cabsformetrasite").then(({ data }) => {
            const cars = values(data.carsList);

            const newCars = [];
            for (let i = 0; i < cars.length; i++) {
                const car = cars[i];
                if (car.CabSN === null) continue;
                const newCar = {
                    id: car.CabSN,
                    cabSN: car.CabSN,
                    AllowSelect: car.AllowSelect,
                    CarColor: car.CarColor,
                    CarModel: car.CarModel,
                    course: car.course,
                    latitude: car.latitude,
                    longitude: car.longitude
                };
                newCars.push(newCar);
            }
            console.log(newCars);
            setItems(cars);
            setTimeout(() => {
                that.request(that);
                this.setPath();
            }, 3000);
        });
    }

Any help?

Kirill
  • 1
  • 2
  • what is not working? – Samuel Goldenbaum May 13 '20 at 14:07
  • First thing that came to my mind is to create two arrays of ids - one with old data, the other - with new data and use `isEqual` function from `lodash` to compare array of ids. – lazy.lizard May 13 '20 at 14:47
  • The second idea is to use `useEffect` in order to compare dependencies and do something whey the changes. – lazy.lizard May 13 '20 at 14:50
  • Both isEqual and useEffect are great ideas. Also if you want to check something "manually" , I sugest [this post](https://stackoverflow.com/questions/1068834/object-comparison-in-javascript), of course useEffect would be the best solution. – CevaComic May 13 '20 at 21:50

0 Answers0