How to improve quality of my javascript - given 2 json-format array

Question

const countryList = [{"countryId":1,"countryQuote":"USDKRW","countryCode":"KRW","countryName":"\uD55C\uAD6D"},{"countryId":2,"countryQuote":"USDJPY","countryCode":"JPY","countryName":"\uC77C\uBCF8"},{"countryId":3,"countryQuote":"USDPHP","countryCode":"PHP","countryName":"\uD544\uB9AC\uD540"}];
const currencyQuoteList = [{"countryQuote":"USDKRW","currencyRate":1162.685028},{"countryQuote":"USDJPY","currencyRate":104.40402},{"countryQuote":"USDPHP","currencyRate":48.480296}];

let itemId = 1;
let countryQuote;
let countryRate;

countryList.forEach(element => {
    if(itemId == element.countryId) {
        countryQuote = element.countryQuote;
    }
});
console.log("countryQuote : " + countryQuote);

currencyQuoteList.forEach(element => {
    if(countryQuote == element.countryQuote) {
        countryRate = element.currencyRate;
    }
})
console.log("countryRate : " + countryRate);

I would like to find currencyRate using itemId.

Const values are given by the server.

I have a countryId in HTML, and I'd like to find currencyRate With these 2 arrays.

Each countryQuote key in arrays would be joinable.

I just have to find currencyRate using brute-force searching, but I would like to improve this code.

What should do I search for it?

I have been searching this subject for 2 hours, but I cannot still take proper answer. T.T — Christopher, Sep 19 '20 at 14:51
Please click edit, then `[<>]` snippet editor and create a [mcve] — mplungjan, Sep 19 '20 at 14:52
@mplungjan I created snippet editor. Is this the result what you told ? — Christopher, Sep 19 '20 at 15:08
All answers are my favorites but I cannot accept all of them. I just accepted the oldest answer, and clicked useful thumb up to all of answers. Thanks for the quick answer. !! — Christopher, Sep 19 '20 at 15:22
@Christopher Can you do something (server side) for joining the two information? — Carlo Corradini, Sep 19 '20 at 15:25
@CarloCorradini I considered that way but I just think "how to hand this problem beautifully in javascript" at this time. ^_^ ;; — Christopher, Sep 19 '20 at 15:28

Carlo Corradini · Accepted Answer · 2020-09-19T15:17:40.760

Does this solution can suit your needs?

Use find instead of forEach :)

I have added a little bit of checks for undefined values.

const countryList = [{"countryId":1,"countryQuote":"USDKRW","countryCode":"KRW","countryName":"\uD55C\uAD6D"},{"countryId":2,"countryQuote":"USDJPY","countryCode":"JPY","countryName":"\uC77C\uBCF8"},{"countryId":3,"countryQuote":"USDPHP","countryCode":"PHP","countryName":"\uD544\uB9AC\uD540"}];
const currencyQuoteList = [{"countryQuote":"USDKRW","currencyRate":1162.685028},{"countryQuote":"USDJPY","currencyRate":104.40402},{"countryQuote":"USDPHP","currencyRate":48.480296}];

// The item identifier
const itemId = 1;

// Search country using itemId
const country = countryList.find(c => c.countryId === itemId);

if(country !== undefined) {
  // Country found

  // Search a match in currencyQuote using countryQuote found
  const currency = currencyQuoteList.find(c => c.countryQuote === country.countryQuote);
  
  if(currency !== undefined) {
    // Currency found !!!
    console.log(`Country: ${country.countryQuote}`)
    console.log(`Currency Rate: ${currency.currencyRate}`);
  } else {
    // Currency not found
    console.log("Invalid countryQuote :(");
  }
} else {
  // Country not found
  console.log("Invalid itemId :(");
}

PS: From this: "Since ES6 there is the native find method for arrays; this stops enumerating the array once it finds the first match and returns the value."

So, using find is far more efficient (if found) rather than check every single element in the array.

My answer used a `filter()`, but I think your `find()` solution is better here. Upvoted for that! — Marc, Sep 19 '20 at 15:20

Marc · Answer 2 · 2020-09-19T15:15:59.537

Javascript has a built-in filter function for Arrays. Use it.

const countryList = [{"countryId":1,"countryQuote":"USDKRW","countryCode":"KRW","countryName":"\uD55C\uAD6D"},{"countryId":2,"countryQuote":"USDJPY","countryCode":"JPY","countryName":"\uC77C\uBCF8"},{"countryId":3,"countryQuote":"USDPHP","countryCode":"PHP","countryName":"\uD544\uB9AC\uD540"}];
const currencyQuoteList = [{"countryQuote":"USDKRW","currencyRate":1162.685028},{"countryQuote":"USDJPY","currencyRate":104.40402},{"countryQuote":"USDPHP","currencyRate":48.480296}];

let itemId = 1;
//let countryQuote;
let countryRate;

//this one line replaces your first forEach loop
let country = countryList.filter(countryCode => countryCode.countryId == itemId)[0];

//show result of first filter
console.log("country:");
console.log(country);

//this one line replaces your 2nd forEach loop
let quote = currencyQuoteList.filter(element => element.countryQuote == country.countryQuote)[0];
countryRate = quote.currencyRate;

//show result of 2nd filter
console.log("countryRate : " + countryRate);

Alessio Cantarella · Answer 3 · 2020-09-19T17:19:28.780

With the JavaScript filter function you could simply filter the country with the specific countryId from your countryList array. Then filter the currencyQuoteList by countryQuote to add the currencyRate property to your country object.

e.g. let's suppose that countryId is 2:

const countryList = [{
  "countryId": 1,
  "countryQuote": "USDKRW",
  "countryCode": "KRW",
  "countryName": "\uD55C\uAD6D"
}, {
  "countryId": 2,
  "countryQuote": "USDJPY",
  "countryCode": "JPY",
  "countryName": "\uC77C\uBCF8"
}, {
  "countryId": 3,
  "countryQuote": "USDPHP",
  "countryCode": "PHP",
  "countryName": "\uD544\uB9AC\uD540"
}];
const currencyQuoteList = [{
  "countryQuote": "USDKRW",
  "currencyRate": 1162.685028
}, {
  "countryQuote": "USDJPY",
  "currencyRate": 104.40402
}, {
  "countryQuote": "USDPHP",
  "currencyRate": 48.480296
}];
let countryId = 2;
let country = countryList.filter(c => c.countryId == countryId)[0];
country.currencyRate = currencyQuoteList.filter(cq => cq.countryQuote == country.countryQuote)[0].currencyRate;
console.log(country);

score 1 · Answer 4 · answered Sep 19 '20 at 16:53

I would do this in a little different way that first join both the arrays and create a single array with the consolidated details using Array.reduce and then find based on countryId

const countryList = [{countryId:1,countryQuote:'USDKRW',countryCode:'KRW',countryName:'\uD55C\uAD6D',},{countryId:2,countryQuote:'USDJPY',countryCode:'JPY',countryName:'\uC77C\uBCF8',},{countryId:3,countryQuote:'USDPHP',countryCode:'PHP',countryName:'\uD544\uB9AC\uD540',},];
const currencyQuoteList = [{countryQuote:'USDKRW',currencyRate:1162.685028},{countryQuote:'USDJPY',currencyRate:104.40402},{countryQuote:'USDPHP',currencyRate:48.480296},];


const formatData = data => {
  const finalRes = data.reduce((res, {
    countryQuote,
    ...rest
  }) => {
    res[countryQuote] = {
      ...res[countryQuote],
      ...rest,
    };

    return res;
  }, {});

  return Object.values(finalRes);
};

const formattedData = formatData([...countryList, ...currencyQuoteList]);
//console.log(formattedData);

let itemId = 1;

const getItemById = (data, id) => data.find(({countryId}) => countryId === id)

console.log("ID = 1 then currencyRate: ",getItemById(formattedData, itemId)?.currencyRate);
console.log("ID = 2 then currencyRate: ", getItemById(formattedData, 2)?.currencyRate);

thanks a lot for the comment :) It's really helpful to me. – Christopher Sep 20 '20 at 04:21 — Christopher, Sep 20 '20 at 04:21

How to improve quality of my javascript - given 2 json-format array

4 Answers4

Does this solution can suit your needs?