[英]How can I extract specific values from all items in axios response object to a a vuex state
這讓我發瘋!
我有一個 axios 調用在控制台中返回一個 json 數組對象 - 檢查!
>(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
>0:
id: 54892250
iid: 1001
ref: "master"
sha: "63e3fc014e207dd4e708749cee3e89a1aa416b7d"
created_at: "2020-03-05T18:57:02.793Z"
updated_at: "2020-03-05T19:06:27.651Z"
>user: {id: someuserid, name: "someuser", username: "someusername", state: "active", avatar_url: "https://assets.gitlab-static.net/uploads/-/system/user/avatar/4534925/avatar.png", …}
>environment: {id: 123456, name: "somename", slug: "somename-iw5iqp", external_url: "https://someaddress.com"}
>deployable: {id: someid, status: "success", stage: "deploy", name: "deploy-staging", ref: "master", …}
status: "success"
__proto__: Object
>1: {id: 54804365, iid: 1000, ref: "filter-out-expired-items", sha: "6225d8018c86fa906063aeea5c10c710ddced14c", created_at: "2020-03-05T12:25:18.949Z", …}
>2: {id: 54804175, iid: 999, ref: "master", sha: "aa5e50c50ba95e9b16cbc57fb968bf9075c625b2", created_at: "2020-03-05T12:24:02.284Z", …}
>3: {id: 54801934, iid: 998, ref: "filter-out-expired-items", sha: "4fc2
現在我需要用這個結果做兩件事:
類似於:
{ "id": id, "ref": ref, "environment": environment.name, "status": status, "tag": deployable.tag, }
我該怎么做呢?
我有一個工作循環,我正在獲取所有這些的 console.log。 但是我需要做的是在提交狀態之前連接所有頁面(現在已剝離到上述字段)。 如果嘗試過對象復制,推送到數組和各種有前途的實用程序 - 但我無法讓它們中的任何一個工作:)
所以總結一下:
循環的相關部分
// Use headers to get the number of pages
const pages = await axios.head(url, options)
.then((response) => response.headers['x-total-pages']);
console.log('pages=', pages); // DEBUG
// Loop through and push them to an array
for (let i = 0; i <= pages; i += 1) {
console.log('i=', i);
options = {
headers: {
'Private-Token': token,
},
params: {
order_by: 'created_at',
sort: 'desc',
per_page: 100,
page: i,
},
};
axios.get(url, options)
.then((result) => { console.log(result.data); })
}
為總結果創建一個數組:
const results = [];
在您記錄的地方,解析每個單獨的結果:
result.data.forEach(item => {
results.push({
id: item.id,
ref: item.ref,
environment: item.environment.name,
status: item.status,
tag: item.deployable.tag
});
});
請注意,使用普通for
循環而不是forEach
可能是一種性能優化。
我認為您可以使用 Promise 來保持請求的順序,從而對跨頁數據進行排序。 關鍵是將每個 axios 調用放入一個數組中,然后使用該數組調用Promise.all([])
以按照您發出請求的原始順序一次獲得所有響應。
// Use headers to get the number of pages
const pages = await axios.head(url, options)
.then((response) => response.headers['x-total-pages']);
console.log('pages=', pages); // DEBUG
let promises = [];
// Loop through and push them to an array
for (let i = 0; i <= pages; i += 1) {
console.log('i=', i);
options = {
headers: {
'Private-Token': token,
},
params: {
order_by: 'created_at',
sort: 'desc',
per_page: 100,
page: i,
},
};
let promise = axios.get(url, options);
// this below keep responses order
promises.push(promise);
}
// This wait for all Axios calls to be resolved as promise
Promise.all(promises)
.then((result) => {
// now if you have 10 pages, you'll have result[0] to result[9], each of them is an axios response
console.log(result[0].data);
console.log(result[1].data); // if pages > 0
let items = []; // you can declare it outside too for Scope access
for (let i = 0; i <= pages; i += 1) {
// so many records, then take the minimum info
if (result[i].data.length >= 1000) {
result[i].data.forEach(item => {
items.push({
id: item.id,
ref: item.ref,
environment: item.environment.name,
status: item.status,
tag: item.deployable.tag
});
}
} else {
// Not so many records then take all info
items = items.concat(result[i]);
}
}
// TODO: do whatever you want with the items array now
});
我會在這里使用Array.prototype.map
將原始對象映射到只有屬性子集的簡化對象:
const newResult = result.data.map(d => ({
id: d.id,
ref: d.ref,
environmentName: d.environment.name,
status: d.deployable.status,
deployableTag: d.deployable.tag
}))
const data = [ { "created_at": "2016-08-11T07:36:40.222Z", "updated_at": "2016-08-11T07:38:12.414Z", "deployable": { "commit": { "author_email": "admin@example.com", "author_name": "Administrator", "created_at": "2016-08-11T09:36:01.000+02:00", "id": "99d03678b90d914dbb1b109132516d71a4a03ea8", "message": "Merge branch 'new-title' into 'master'\\r\\n\\r\\nUpdate README\\r\\n\\r\\n\\r\\n\\r\\nSee merge request !1", "short_id": "99d03678", "title": "Merge branch 'new-title' into 'master'\\r" }, "coverage": null, "created_at": "2016-08-11T07:36:27.357Z", "finished_at": "2016-08-11T07:36:39.851Z", "id": 657, "name": "deploy", "ref": "master", "runner": null, "stage": "deploy", "started_at": null, "status": "success", "tag": false, "user": { "id": 1, "name": "Administrator", "username": "root", "state": "active", "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon", "web_url": "http://gitlab.dev/root", "created_at": "2015-12-21T13:14:24.077Z", "bio": null, "location": null, "public_email": "", "skype": "", "linkedin": "", "twitter": "", "website_url": "", "organization": "" }, "pipeline": { "created_at": "2016-08-11T02:12:10.222Z", "id": 36, "ref": "master", "sha": "99d03678b90d914dbb1b109132516d71a4a03ea8", "status": "success", "updated_at": "2016-08-11T02:12:10.222Z", "web_url": "http://gitlab.dev/root/project/pipelines/12" } }, "environment": { "external_url": "https://about.gitlab.com", "id": 9, "name": "production" }, "id": 41, "iid": 1, "ref": "master", "sha": "99d03678b90d914dbb1b109132516d71a4a03ea8", "user": { "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon", "id": 1, "name": "Administrator", "state": "active", "username": "root", "web_url": "http://localhost:3000/root" } }, { "created_at": "2016-08-11T11:32:35.444Z", "updated_at": "2016-08-11T11:34:01.123Z", "deployable": { "commit": { "author_email": "admin@example.com", "author_name": "Administrator", "created_at": "2016-08-11T13:28:26.000+02:00", "id": "a91957a858320c0e17f3a0eca7cfacbff50ea29a", "message": "Merge branch 'rename-readme' into 'master'\\r\\n\\r\\nRename README\\r\\n\\r\\n\\r\\n\\r\\nSee merge request !2", "short_id": "a91957a8", "title": "Merge branch 'rename-readme' into 'master'\\r" }, "coverage": null, "created_at": "2016-08-11T11:32:24.456Z", "finished_at": "2016-08-11T11:32:35.145Z", "id": 664, "name": "deploy", "ref": "master", "runner": null, "stage": "deploy", "started_at": null, "status": "success", "tag": false, "user": { "id": 1, "name": "Administrator", "username": "root", "state": "active", "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon", "web_url": "http://gitlab.dev/root", "created_at": "2015-12-21T13:14:24.077Z", "bio": null, "location": null, "public_email": "", "skype": "", "linkedin": "", "twitter": "", "website_url": "", "organization": "" }, "pipeline": { "created_at": "2016-08-11T07:43:52.143Z", "id": 37, "ref": "master", "sha": "a91957a858320c0e17f3a0eca7cfacbff50ea29a", "status": "success", "updated_at": "2016-08-11T07:43:52.143Z", "web_url": "http://gitlab.dev/root/project/pipelines/13" } }, "environment": { "external_url": "https://about.gitlab.com", "id": 9, "name": "production" }, "id": 42, "iid": 2, "ref": "master", "sha": "a91957a858320c0e17f3a0eca7cfacbff50ea29a", "user": { "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon", "id": 1, "name": "Administrator", "state": "active", "username": "root", "web_url": "http://localhost:3000/root" } } ] const result = data.map(d => ({ id: d.id, ref: d.ref, environmentName: d.environment.name, status: d.deployable.status, deployableTag: d.deployable.tag })) console.log(result)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.