26.04.2022, 17:10
|
|
Аспирант
|
|
Регистрация: 31.05.2021
Сообщений: 32
|
|
|
При перезагрузке страницы меняется порядок объектов в массиве
Если перезагружать страницу и смотреть значения ключа title (массив movieObjArr) в консоли. То названия меняются. Почему эту происходит?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const secondPage = "page|279ca2067846c0060304271a0662e878f4f4011301eebfee0a|596563";
Promise.all([
fetch("https://ru.wikipedia.org/w/api.php?action=query&list=categorymembers&cmtitle=%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%9A%D0%B8%D0%BD%D0%BE%D0%BA%D0%BE%D0%BC%D0%B5%D0%B4%D0%B8%D0%B8%20%D0%A1%D0%A1%D0%A1%D0%A0&cmlimit=500&format=json&prop=iwlinks&origin=*"),
fetch(`https://ru.wikipedia.org/w/api.php?action=query&list=categorymembers&cmtitle=%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%9A%D0%B8%D0%BD%D0%BE%D0%BA%D0%BE%D0%BC%D0%B5%D0%B4%D0%B8%D0%B8%20%D0%A1%D0%A1%D0%A1%D0%A0&cmlimit=500&format=json&prop=iwlinks&origin=*&cmcontinue=${secondPage}`)
])
.then (function(responses){
return Promise.all(responses.map(function(response) {
return response.json();
}));
}).then (function(data) {
let fObject = data[0].query.categorymembers;
let sObject = data[1].query.categorymembers;
let fullObject = fObject.concat(sObject);
for(j = 0; j < fullObject.length; j++) {
delete fullObject[j].pageid;
delete fullObject[j].ns;
}
//CONVERT STRUCTURE OF OBJECT
arr = fullObject.map(function(obj) {
return obj.title;
});
const groupNames = arr => {
const map = arr.reduce((acc, val) => {
let char = val.charAt(0).toUpperCase();
acc[char] = [].concat((acc[char] || []), val);
return acc;
}, {});
const res = Object.keys(map).map(el => ({
letter: el,
names: map[el]
}));
return res;
};
//EDIT ARRAY
arrEdited = groupNames(arr);
let namesArrEdited = arrEdited[12].names;
console.log(namesArrEdited);
namesArrEdited.splice(41, 9);
namesArrEdited.push('Кыш и два портфеля');
arrEdited[0].names.push('4:0 в пользу Танечки');
arrEdited.splice(1, 1);
arrEdited.splice(19, 1);
arrEdited.splice(30, 1);
let newArr = arr;
let movieObjArr = [];
Promise.all(
newArr.map(title => {
return new Promise((resolve) => {
fetch(`https://ru.wikipedia.org/w/api.php?action=query&prop=imageinfo&titles=${title}&format=json&iiprop=url&generator=images&origin=*`)
.then(response => {
return new Promise(() => {
response.json()
.then(movieObj => {
movieObjArr.push(movieObj);
console.log(movieObjArr);
// xy = all;
resolve();
})
})
})
})
})
)
.then(() => {
})
})
</script>
</body>
</html>
|
|
26.04.2022, 18:06
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,148
|
|
|
Judgin,
отвечает сервер с разными задержками, в разнобой, нужен порядок, вместо push используйте index, строки 61 и 68
|
|
27.04.2022, 21:53
|
|
Аспирант
|
|
Регистрация: 31.05.2021
Сообщений: 32
|
|
Сообщение от рони
|
Judgin,
отвечает сервер с разными задержками, в разнобой, нужен порядок, вместо push используйте index, строки 61 и 68
|
Благодарю в очередной раз за помощь! Карму повысить хочу, но не могу). Однако возникла другая проблема. Передаю массив в следующий then, там перебираю его в цикле, нужные мне значения упаковываю в массив, но как этот массив передать за пределы цикла? Получаю ошибку "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pages')"
Promise.all(
newArr.map((title, index) => {
return new Promise((resolve) => {
fetch(`https://ru.wikipedia.org/w/api.php?action=query&prop=imageinfo&titles=${title}&format=json&iiprop=url&generator=images&origin=*`)
.then(response => {
return new Promise(() => {
response.json()
.then(movieObj => {
movieObjArr[index] = movieObj;
resolve();
})
})
})
})
})
)
.then(() => {
newArr2 = [];
movieObjArr.map(key => {
firstObjInMovieArr = key;
secondObjInMovieArr = firstObjInMovieArr.query;
thirdObjInMovieArr = secondObjInMovieArr.pages;
fourthObjInMovieArr = Object.values(thirdObjInMovieArr);
fifthObjInMovieArr = fourthObjInMovieArr[0];
movieImgUrlArr = fifthObjInMovieArr.imageinfo;
firstIndex = movieImgUrlArr[0];
movieImgUrl = firstIndex.url
newArr2.push(movieImgUrl);
})
})
.then(() => {
console.log(newArr2);
})
|
|
27.04.2022, 23:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,148
|
|
Judgin,
в нормальном случае вызвать функцию для обработки массива, когда массив готов.
второй вариант обернуть в async и использовать await, но и тут цепочка та же, но моднее синтаксис, получили массив, обработали, примеры вам показывали. https://javascript.ru/forum/ajax/839...tml#post544741
|
|
28.04.2022, 23:20
|
|
Аспирант
|
|
Регистрация: 31.05.2021
Сообщений: 32
|
|
|
Сообщение от рони
|
Judgin,
в нормальном случае вызвать функцию для обработки массива, когда массив готов.
второй вариант обернуть в async и использовать await, но и тут цепочка та же, но моднее синтаксис, получили массив, обработали, примеры вам показывали. https://javascript.ru/forum/ajax/839...tml#post544741
|
Получаю массив, но он какой-то неправильный. Мне, для дальнейших манипуляций нужен обычный массив т.е ['one', 'two', 'three']. Как трансформировать полученный массив в обычный? Или же я получаю массив неправильно? Ниже код.
Картинка почему то не прикрепляется. Выглядит он следующим образом, слева идут ключи с нумерацией, а справа от ключа одно значение и как бы в столбик получается.
.then(() => {
newArr2 = [];
console.log(movieObjArr);
movieObjArr.map(key => {
return new Promise((resolve) => {
setTimeout(() => {
firstObjInMovieArr = key;
secondObjInMovieArr = firstObjInMovieArr.query;
thirdObjInMovieArr = secondObjInMovieArr.pages;
fourthObjInMovieArr = Object.values(thirdObjInMovieArr);
fifthObjInMovieArr = fourthObjInMovieArr[0];
title = fifthObjInMovieArr.title;
movieImgUrlArr = fifthObjInMovieArr.imageinfo;
firstIndex = movieImgUrlArr[0];
movieImgUrl = firstIndex.url
newArr2.push(movieImgUrl);
resolve();
}, 1000);
});
})
})
.then(() => {
console.log(newArr2);
});
Последний раз редактировалось Judgin, 28.04.2022 в 23:29.
|
|
28.04.2022, 23:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,148
|
|
|
Сообщение от Judgin
|
|
Получаю массив, но он какой-то неправильный.
|
можно только гадать...
push замените на index
movieObjArr.map((key, i) => {
return new Promise((resolve) => {
setTimeout(() => {
firstObjInMovieArr = key;
secondObjInMovieArr = firstObjInMovieArr.query;
thirdObjInMovieArr = secondObjInMovieArr.pages;
fourthObjInMovieArr = Object.values(thirdObjInMovieArr);
fifthObjInMovieArr = fourthObjInMovieArr[0];
title = fifthObjInMovieArr.title;
movieImgUrlArr = fifthObjInMovieArr.imageinfo;
firstIndex = movieImgUrlArr[0];
movieImgUrl = firstIndex.url
newArr2[i] = movieImgUrl;
|
|
29.04.2022, 12:10
|
|
Аспирант
|
|
Регистрация: 31.05.2021
Сообщений: 32
|
|
|
Сообщение от рони
|
можно только гадать...
push замените на index
movieObjArr.map((key, i) => {
return new Promise((resolve) => {
setTimeout(() => {
firstObjInMovieArr = key;
secondObjInMovieArr = firstObjInMovieArr.query;
thirdObjInMovieArr = secondObjInMovieArr.pages;
fourthObjInMovieArr = Object.values(thirdObjInMovieArr);
fifthObjInMovieArr = fourthObjInMovieArr[0];
title = fifthObjInMovieArr.title;
movieImgUrlArr = fifthObjInMovieArr.imageinfo;
firstIndex = movieImgUrlArr[0];
movieImgUrl = firstIndex.url
newArr2[i] = movieImgUrl;
|
https://drive.google.com/file/d/1Qla...ew?usp=sharing
Добавил скриншот |
|
30.04.2022, 18:02
|
|
Аспирант
|
|
Регистрация: 31.05.2021
Сообщений: 32
|
|
|
Сообщение от рони
|
можно только гадать...
push замените на index
movieObjArr.map((key, i) => {
return new Promise((resolve) => {
setTimeout(() => {
firstObjInMovieArr = key;
secondObjInMovieArr = firstObjInMovieArr.query;
thirdObjInMovieArr = secondObjInMovieArr.pages;
fourthObjInMovieArr = Object.values(thirdObjInMovieArr);
fifthObjInMovieArr = fourthObjInMovieArr[0];
title = fifthObjInMovieArr.title;
movieImgUrlArr = fifthObjInMovieArr.imageinfo;
firstIndex = movieImgUrlArr[0];
movieImgUrl = firstIndex.url
newArr2[i] = movieImgUrl;
|
Посмотрите пожалуйста скриншот. Как-то можно изменить его структуру? Чтобы он выглядел так ['one', 'two', 'three']. Третий день ищу решение, но не нахожу. |
|
30.04.2022, 18:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,148
|
|
|
Judgin,
не могу помочь, не понимаю ваш код и задачу.
|
|
30.04.2022, 19:37
|
|
Аспирант
|
|
Регистрация: 31.05.2021
Сообщений: 32
|
|
|
Сообщение от рони
|
Judgin,
не могу помочь, не понимаю ваш код и задачу.
|
Смотрите, мне нужно создать объект из двух массивов newArr и newArr2. Если я создаю этот объект используя код приведенный ниже, то получаю значение undefined (первый скрин), так как массив newArr2 имеет структуру, как на скриншоте выше. Но если я создаю тестовый массив (arr1) который имеет структуру ['one', 'two', 'three'], то получается то что нужно (второй скрин). Т.е мне нужно newArr2 привести к структуре тестового массива arr1.
https://drive.google.com/file/d/1HCA...ew?usp=sharing
https://drive.google.com/file/d/1ToH...ew?usp=sharing
.then(() => {
newArr2 = [];
movieObjArr.map((key, index) => {
return new Promise((resolve) => {
setTimeout(() => {
firstObjInMovieArr = key;
secondObjInMovieArr = firstObjInMovieArr.query;
thirdObjInMovieArr = secondObjInMovieArr.pages;
fourthObjInMovieArr = Object.values(thirdObjInMovieArr);
fifthObjInMovieArr = fourthObjInMovieArr[0];
title = fifthObjInMovieArr.title;
movieImgUrlArr = fifthObjInMovieArr.imageinfo;
firstIndex = movieImgUrlArr[0];
movieImgUrl = firstIndex.url
newArr2[index] = movieImgUrl;
resolve();
}, 1000);
});
})
})
.then(() => {
// const arr1 = ['one', 'two', 'three'];
const obj = {};
newArr.forEach((element, index) => {
obj[element] = newArr2[index];
});
console.log(obj);
});
|
|
|
|
