Trying to iterate between 2 var obj and merge them

Question

I have:

const dictionary  = [
  {
    "state": "AK",
    "lat": "9875.33.00",
    "long": "-8371.42.00",
    "name": "Alaska"
  },
  {
    "state": "AL",
    "lat": "5335.51.00",
    "long": "-15124.18.00",
    "name": "Alabama"
  }
];

const data = [
  {
    "date": 20200421,
    "state": "AK",
  },
  {
    "date": 20200421,
    "state": "AL",
  }
];

const result = data.map(item => ({...item, lat: dictionary[item.state].lat, long: dictionary[item.state].long }))
console.log(result);

Basically trying to add dictionary as objs per each data where the state matches but I'm having:

Cannot read property 'lat' of undefined

Expecting:

const result = [
  {
    "date": 20200421,
    "state": "AK",
    "lat": "9875.33.00",
    "long": "-8371.42.00",
  },
  {
    "date": 20200421,
    "state": "AL",
    "lat": "5335.51.00",
    "long": "-15124.18.00",
  }
];

I'm trying on fiddle

`dictionary[item.state]` doesn't exist, `dictionary` is an array, not an object, it doesn't have state (`AK`) properties — CertainPerformance, Apr 22 '20 at 08:00
@CertainPerformance right, true! Is there anyway I can convert it? — rob.m, Apr 22 '20 at 08:01
@CertainPerformance Yes I was looking and trying this https://stackoverflow.com/questions/4215737/convert-array-to-object — rob.m, Apr 22 '20 at 08:06

Nina Scholz · Answer 1 · 2020-04-22T08:22:57.237

1

You could take an object with state as key and merge new objects by taking name out of the object.

const
    dictionary  = [{ state: "AK", lat: "9875.33.00", long: "-8371.42.00", name: "Alaska" }, { state: "AL", lat: "5335.51.00", long: "-15124.18.00", name: "Alabama" }],
    data = [{ date: 20200421, state: "AK" }, { date: 20200421, state: "AL" }],
    states = data.reduce((r, o) => (r[o.state] = o, r), {}),
    merged = dictionary.map(({ name, ...o }) => ({ ...(states[o.state] || {}), ...o }));

console.log(merged);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Apr 22 '20 at 08:22

answered Apr 22 '20 at 08:03

Nina Scholz

376,160
25
347
392

thanks works perfectly, but when i try to load it vis an url it breaks. Not sure, is it an async issue you reckon? https://jsfiddle.net/51qyzwh2/ – rob.m Apr 22 '20 at 08:13
sorry this one, was trying the other answer https://jsfiddle.net/8rsbap4j/ – rob.m Apr 22 '20 at 08:16
`array` is not known. maybe renaming to `dictionary` would help. – Nina Scholz Apr 22 '20 at 08:18
sorry I'm switching in between the answers while trying and getting confused, now trying the other answer but I get lat is not defined not sure what I'm doing wrong, https://jsfiddle.net/7akxoqh1/ – rob.m Apr 22 '20 at 08:26
there is nothing wrong with your answer and actually I would have wanted to just accept it, i'm going around something stupid, I'm sure, the other answer told me I'm not loading data but I thought I was since I've set the url https://jsfiddle.net/7akxoqh1/ – rob.m Apr 22 '20 at 08:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212241/discussion-between-rob-m-and-nina-scholz). – rob.m Apr 22 '20 at 08:37
is it possible we have an issue with async? https://jsfiddle.net/a6dfhsz3/ – rob.m Apr 22 '20 at 08:40
bingo! the other answer resolved it https://jsfiddle.net/bL43g7sc/ – rob.m Apr 22 '20 at 08:42

Rahul Purohit · Accepted Answer · 2020-04-22T08:41:17.993

1

You cannot access the array items as one whole array. You have to isolate you desired obj. Use this.

    const result = data.map(function(item) {
  const ditem = dictionary.find(d => d.state == item.state);
  if(ditem) {
  return {
    ...item,
    "lat": ditem.lat ,
    "long": ditem.long
  } 
  }
  return item;

});

console.log(result);

edited Apr 22 '20 at 08:41

answered Apr 22 '20 at 08:11

Rahul Purohit

540
4
16

I'm trying by saving the 2 js as different files and laod them via url, not sure if there is an async problem https://jsfiddle.net/51qyzwh2/1/ – rob.m Apr 22 '20 at 08:14
did you try the above snippet i gave? – Rahul Purohit Apr 22 '20 at 08:15
sure it's on that fiddle – rob.m Apr 22 '20 at 08:16
yeah you haven't added the dictionary object to js – Rahul Purohit Apr 22 '20 at 08:17
One more thing make dictionary variable let, filter changes inplace – Rahul Purohit Apr 22 '20 at 08:18
not sure what I'm doing wrong, now says lat is not defined https://jsfiddle.net/7akxoqh1/ – rob.m Apr 22 '20 at 08:25
@rob.m dude you're not putting the data and just copying the snipper wait let me give you a new snippet – Rahul Purohit Apr 22 '20 at 08:27
thought I was tho by loading data via the url – rob.m Apr 22 '20 at 08:28
yes that works but what if I load those js via the url? I've added them on my fiddle https://jsfiddle.net/7akxoqh1/ – rob.m Apr 22 '20 at 08:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212242/discussion-between-rob-m-and-dev). – rob.m Apr 22 '20 at 08:37
maybe there is an issue with async? – rob.m Apr 22 '20 at 08:40
No I have changes the snippet above. Try that and lmk – Rahul Purohit Apr 22 '20 at 08:41
ohhh finally! What was the issue? – rob.m Apr 22 '20 at 08:42
See not every state was in the dictionary. That's why the return broke. – Rahul Purohit Apr 22 '20 at 08:43
oh! that means I will miss some data? What happens to those states? https://jsfiddle.net/bL43g7sc/2/ – rob.m Apr 22 '20 at 08:45
Right now I just dont put the lat and lang and just return the normal json – Rahul Purohit Apr 22 '20 at 08:46
is there a way we could also log all the missing states? Because I might try to find them separetly if I know which ones they are – rob.m Apr 22 '20 at 08:48

bill.gates · Answer 3 · 2020-04-22T08:15:09.807

 const dictionary  = [
        {
      "state": "AK",
      "lat": "9875.33.00",
      "long": "-8371.42.00",
      "name": "Alaska"
     },
     {
      "state": "AL",
      "lat": "5335.51.00",
      "long": "-15124.18.00",
      "name": "Alabama"
     }
      ];
      
const data = [
  {
    "date": 20200421,
    "state": "AK",
  },
  {
    "date": 20200421,
    "state": "AL",
  }
];

let result = dictionary.filter(element =>{
   for(let i = 0; i < data.length; i++){
      if(data[i].state == element.state) return element;
   }
})
console.log(result);

Trying to iterate between 2 var obj and merge them

3 Answers3