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

Question

I have two arrays with data from my database:

Cases array and photo's array from api:

{
  "cases": [{
    "id": 3,
    "photo_id": 14
  }, {
    "id": 2,
    "photo_id": 0
  }, {
    "id": 1,
    "photo_id": 13
  }],
  "photos": [{
    "id": 6,
    "file": "\/images\/1556196076cache_f50f03558d201b8eb2a9af90f0838cee.png"
  }, {
    "id": 11,
    "file": "\/images\/1556198414cache_702c216fa5a4d75d74db237ddf97b012.png"
  }, {
    "id": 12,
    "file": "\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png"
  }, {
    "id": 13,
    "file": "\/images\/1556726055dewekkpot.nl_short.jpg"
  }, {
    "id": 14,
    "file": "\/images\/1556791722dewekkpot.nl_short.jpg"
  }]
}

Now if any photo_id from the cases array matches any id from the photos array with the same value, i have to extract the file key from that specific index with the matching id. And push them as a new key value pair to the cases array at the correct index.

What i now have is the following:

    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);


}

The output of this are the values that exists in the cases array from the photos array.

so [13, 14].

what should i do next?

Thanks in advance!

Answer 1

Normalise your data. Convert your photos array to an object with photo_id as keys, for easy access.

You could do something like the following:

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);

}

Answer 2

You can filter the objects as below snippet and use it to render your view.

 const obj = { "cases": [{ "id": 3, "photo_id": 14 }, { "id": 2, "photo_id": 0 }, { "id": 1, "photo_id": 13 }], "photos": [{ "id": 6, "file": "\\/images\\/1556196076cache_f50f03558d201b8eb2a9af90f0838cee.png" }, { "id": 11, "file": "\\/images\\/1556198414cache_702c216fa5a4d75d74db237ddf97b012.png" }, { "id": 12, "file": "\\/images\\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png" }, { "id": 13, "file": "\\/images\\/1556726055dewekkpot.nl_short.jpg" }, { "id": 14, "file": "\\/images\\/1556791722dewekkpot.nl_short.jpg" }] }; const photoIds = obj.cases.reduce((acc, val) => { acc[val.photo_id] = val; return acc; }, {}); const res = obj.photos.filter(val => photoIds[val.id]); console.log(res) 

Answer 3

You can use Array.map() and Array.find() like this:

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;
});

Live example:

 const data = { "cases": [{ "id": 3, "photo_id": 14 }, { "id": 2, "photo_id": 0 }, { "id": 1, "photo_id": 13 }], "photos": [{ "id": 6, "file": "\\/images\\/1556196076cache_f50f03558d201b8eb2a9af90f0838cee.png" }, { "id": 11, "file": "\\/images\\/1556198414cache_702c216fa5a4d75d74db237ddf97b012.png" }, { "id": 12, "file": "\\/images\\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png" }, { "id": 13, "file": "\\/images\\/1556726055dewekkpot.nl_short.jpg" }, { "id": 14, "file": "\\/images\\/1556791722dewekkpot.nl_short.jpg" }] }; const newCases = data.cases.map(({ photo_id, ...rest }) => { const obj = { ...rest }; data.photos.find(ph => { if(ph.id === photo_id) { obj.file = ph.file; return true; } }); return obj; }); console.log(newCases); 

Answer 4

function addPhotos(cases, photos){
    return cases.map(function (currentCase) {
            const foundPhoto = photos.find(function(currentPhoto){
                return currentPhoto.id === currentCase.photo_id;
            });
            currentCase.photo_path = foundPhoto? foundPhoto.file : "/images/blank_image.jpg";
            return currentCase;
    });
};

console.log(addPhotos(this.state.cases, this.state.photos));
//Output: [{"id":3,"photo_id":14,"photo_path":"/images/1556791722dewekkpot.nl_short.jpg"},{"id":2,"photo_id":0,"photo_path":"images/blank_image.jpg"},{"id":1,"photo_id":13,"photo_path":"/images/1556726055dewekkpot.nl_short.jpg"}]