Javascript 如何对值必须与特定键和另一个数组中的相同值匹配的数组执行foreach

我有两个阵列，其中包含数据库中的数据：

api中的案例数组和照片数组：

{
“案例”：[{
“id”：3，
“照片id”：14
}, {
“id”：2，
“照片id”：0
}, {
“id”：1，
“照片id”：13
}],
“照片”：[{
“id”：6，
“文件”：“\/images\/1556196076cache\u f50f03558d201b8eb2a9af90f0838cee.png”
}, {
“id”：11，
“文件”：“\/images\/1556198414cache\u 702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：12，
“文件”：“\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：13，
“文件”：“\/images\/1556726055dewekpot.nl\u short.jpg”
}, {
“id”：14，
“文件”：“\/images\/1556791722dewekkpot.nl\u short.jpg”
}]
}

现在，如果cases数组中的任何photo_id与photos数组中具有相同值的任何id匹配，我必须从具有匹配id的特定索引中提取文件密钥，并将它们作为新的密钥-值对推送到cases数组的正确索引处

我现在有以下资料：

    this.state = {
        cases: [],
        photos: [],
    };

getCases() {
    axios
        .get('/cases/api')
        .then(response => {
            this.setState({
                cases: response.data.cases,
                photos: response.data.photos,
            });
            console.log(this.state.cases);
        })
}

addPhotos() {
    var photoIds = this.state.photos.map(function (player) {
        return player.id;
    });

    var casesIds = this.state.cases.map(function (player) {
        return player.photo_id;
    });

    casesIds = casesIds.filter(function (item) {
        return photoIds.includes(item);
    });

    console.log(casesIds);


}

addPhotos() {
    var photosMap = this.state.photos.reduce(function (acc, each) {
      acc[each.id] = each; // or you could just save the corresponding filename
      return acc;
    }, {});

    var photoFiles = this.state.cases.reduce(function (acc, each) { // you could alternatively use Array.filter too.
      if (photosMap[each.photo_id]) {
        acc.push(photosMap[each.photo_id]);
      }
      return acc;
    }, []);

    console.log(photoFiles);

}

其输出是照片数组中案例数组中存在的值

所以[13,14]

接下来我该怎么办

---

提前谢谢

使数据正常化。将您的

照片

阵列转换为具有

照片id

作为键的对象，以便于访问

您可以执行以下操作：

    this.state = {
        cases: [],
        photos: [],
    };

getCases() {
    axios
        .get('/cases/api')
        .then(response => {
            this.setState({
                cases: response.data.cases,
                photos: response.data.photos,
            });
            console.log(this.state.cases);
        })
}

addPhotos() {
    var photoIds = this.state.photos.map(function (player) {
        return player.id;
    });

    var casesIds = this.state.cases.map(function (player) {
        return player.photo_id;
    });

    casesIds = casesIds.filter(function (item) {
        return photoIds.includes(item);
    });

    console.log(casesIds);


}

addPhotos() {
    var photosMap = this.state.photos.reduce(function (acc, each) {
      acc[each.id] = each; // or you could just save the corresponding filename
      return acc;
    }, {});

    var photoFiles = this.state.cases.reduce(function (acc, each) { // you could alternatively use Array.filter too.
      if (photosMap[each.photo_id]) {
        acc.push(photosMap[each.photo_id]);
      }
      return acc;
    }, []);

    console.log(photoFiles);

}

---

使数据正常化。将您的

照片

阵列转换为具有

照片id

作为键的对象，以便于访问

您可以执行以下操作：

    this.state = {
        cases: [],
        photos: [],
    };

getCases() {
    axios
        .get('/cases/api')
        .then(response => {
            this.setState({
                cases: response.data.cases,
                photos: response.data.photos,
            });
            console.log(this.state.cases);
        })
}

addPhotos() {
    var photoIds = this.state.photos.map(function (player) {
        return player.id;
    });

    var casesIds = this.state.cases.map(function (player) {
        return player.photo_id;
    });

    casesIds = casesIds.filter(function (item) {
        return photoIds.includes(item);
    });

    console.log(casesIds);


}

addPhotos() {
    var photosMap = this.state.photos.reduce(function (acc, each) {
      acc[each.id] = each; // or you could just save the corresponding filename
      return acc;
    }, {});

    var photoFiles = this.state.cases.reduce(function (acc, each) { // you could alternatively use Array.filter too.
      if (photosMap[each.photo_id]) {
        acc.push(photosMap[each.photo_id]);
      }
      return acc;
    }, []);

    console.log(photoFiles);

}

---

您可以按照下面的代码段过滤对象，并使用它渲染视图

const obj={
“案例”：[{
“id”：3，
“照片id”：14
}, {
“id”：2，
“照片id”：0
}, {
“id”：1，
“照片id”：13
}],
“照片”：[{
“id”：6，
“文件”：“\/images\/1556196076cache\u f50f03558d201b8eb2a9af90f0838cee.png”
}, {
“id”：11，
“文件”：“\/images\/1556198414cache\u 702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：12，
“文件”：“\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：13，
“文件”：“\/images\/1556726055dewekpot.nl\u short.jpg”
}, {
“id”：14，
“文件”：“\/images\/1556791722dewekkpot.nl\u short.jpg”
}]
};
常量photoIds=对象案例减少（（acc，val）=>{
acc[val.photo_id]=val；
返回acc；
}, {});
const res=obj.photos.filter（val=>photoIds[val.id]）；
console.log（res）

您可以按照下面的代码片段过滤对象，并使用它呈现视图

const obj={
“案例”：[{
“id”：3，
“照片id”：14
}, {
“id”：2，
“照片id”：0
}, {
“id”：1，
“照片id”：13
}],
“照片”：[{
“id”：6，
“文件”：“\/images\/1556196076cache\u f50f03558d201b8eb2a9af90f0838cee.png”
}, {
“id”：11，
“文件”：“\/images\/1556198414cache\u 702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：12，
“文件”：“\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：13，
“文件”：“\/images\/1556726055dewekpot.nl\u short.jpg”
}, {
“id”：14，
“文件”：“\/images\/1556791722dewekkpot.nl\u short.jpg”
}]
};
常量photoIds=对象案例减少（（acc，val）=>{
acc[val.photo_id]=val；
返回acc；
}, {});
const res=obj.photos.filter（val=>photoIds[val.id]）；
console.log（res）

您可以这样使用：

const newCases = this.state.cases.map(({ photo_id, ...rest }) => {
  const obj = { ...rest };
  this.state.photos.find(ph => {
    if(ph.id === photo_id) {
      obj.file = ph.file;
      return true;
    }
  });
  return obj;
});

现场示例：

const数据={
“案例”：[{
“id”：3，
“照片id”：14
}, {
“id”：2，
“照片id”：0
}, {
“id”：1，
“照片id”：13
}],
“照片”：[{
“id”：6，
“文件”：“\/images\/1556196076cache\u f50f03558d201b8eb2a9af90f0838cee.png”
}, {
“id”：11，
“文件”：“\/images\/1556198414cache\u 702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：12，
“文件”：“\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：13，
“文件”：“\/images\/1556726055dewekpot.nl\u short.jpg”
}, {
“id”：14，
“文件”：“\/images\/1556791722dewekkpot.nl\u short.jpg”
}]
};
const newCases=data.cases.map（{photo_id，…rest}）=>{
常量obj={…rest}；
data.photos.find（ph=>{
如果（ph.id==照片id）{
obj.file=ph.file；
返回true；
}
});
返回obj；
});
console.log（新案例）您可以这样使用：

const newCases = this.state.cases.map(({ photo_id, ...rest }) => {
  const obj = { ...rest };
  this.state.photos.find(ph => {
    if(ph.id === photo_id) {
      obj.file = ph.file;
      return true;
    }
  });
  return obj;
});

现场示例：


const数据={
“案例”：[{
“id”：3，
“照片id”：14
}, {
“id”：2，
“照片id”：0
}, {
“id”：1，
“照片id”：13
}],
“照片”：[{
“id”：6，
“文件”：“\/images\/1556196076cache\u f50f03558d201b8eb2a9af90f0838cee.png”
}, {
“id”：11，
“文件”：“\/images\/1556198414cache\u 702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：12，
“文件”：“\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png”
}, {
“id”：13，
“文件”：“\/images\/1556726055dewekpot.nl\u short.jpg”
}, {
“id”：14，
“文件”：“\/images\/1556791722dewekkpot.nl\u short.jpg”
}]
};
const newCases=data.cases.map（{photo_id，…rest}）=>{
常量obj={…rest}；
data.photos.find（ph=>{
如果（ph.id==照片id）{
obj.file=ph.file；
返回true；
}
});
返回obj；
});
console.log（新案例）迭代
案例
并针对
照片
。有什么问题吗？检查我的回答反复查看
案例
，并对照
照片
。问题是什么？检查我的答案这个解决方案与我在答案中已经发布的解决方案有什么不同？这个解决方案与我在答案中已经发布的解决方案有什么不同？谢谢！谢谢你的帮助谢谢！谢谢你的帮助