Using a JSON file to map an array in JavaScript

Question

Using a JSON file to map an array in JavaScript

Looking to connect an array of three-letter codes in JavaScript with corresponding values stored in a JSON file. Let's illustrate with an example:

{"Roles" : [
{"code": "cmm", "fullname": "commentator"},
{"code": "cmp", "fullname": "composer"},
{"code": "cnd", "fullname": "conductor"},
{"code": "cng", "fullname": "cinematographer"},
{"code": "cns", "fullname": "censor"},
{"code": "com", "fullname": "compiler"}
]}

var arr = ["cmm", "com", "cng"];
var mappedArray = arr.map( ??? );

//mappedArray now contains: ["commentator", "composer", "cinematographer"]

Struggling to find an efficient solution for this problem. Any suggestions?

javascript arrays json dictionary

Answer 1

Answer №1

To accomplish this task, you can utilize the filter method

var data = {"Roles" : [
{"code": "cmm", "fullname": "commentator"},
{"code": "cmp", "fullname": "composer"},
{"code": "cnd", "fullname": "conductor"},
{"code": "cng", "fullname": "cinematographer"},
{"code": "cns", "fullname": "censor"},
{"code": "com", "fullname": "compiler"}
]}

var codes = ["cmm", "com", "cng"];

var filteredData = data["Roles"].filter(item => codes.includes(item.code))

console.log('Filtered Data:', filteredData)

console.log('Result:', filteredData.map(({fullname}) => fullname))

Answer 2

To accomplish this task, you can utilize the filter method

var data = {"Roles" : [
{"code": "cmm", "fullname": "commentator"},
{"code": "cmp", "fullname": "composer"},
{"code": "cnd", "fullname": "conductor"},
{"code": "cng", "fullname": "cinematographer"},
{"code": "cns", "fullname": "censor"},
{"code": "com", "fullname": "compiler"}
]}

var codes = ["cmm", "com", "cng"];

var filteredData = data["Roles"].filter(item => codes.includes(item.code))

console.log('Filtered Data:', filteredData)

console.log('Result:', filteredData.map(({fullname}) => fullname))

Answer 3

Answer №2

To efficiently extract specific data, using a for/loop is still the preferred method:

const data = {"Roles" : [{"code": "cmm", "fullname": "commentator"},{"code": "cmp", "fullname": "composer"},{"code": "cnd", "fullname": "conductor"},{"code": "cng", "fullname": "cinematographer"},{"code": "cns", "fullname": "censor"},{"code": "com", "fullname": "compiler"}]};
var arr = ["cmm", "com", "cng"];

const out = [];
for (let i = 0; i < data.Roles.length; i++) {
  const el = data.Roles[i];
  if (arr.indexOf(el.code) > -1) out.push(el.fullname);
}

console.log(out);

Although using reduce provides a more functional and cleaner approach, it may not be as efficient. It allows direct extraction of desired data without the need for filter followed by map.

const data = {"Roles" : [{"code": "cmm", "fullname": "commentator"},{"code": "cmp", "fullname": "composer"},{"code": "cnd", "fullname": "conductor"},{"code": "cng", "fullname": "cinematographer"},{"code": "cns", "fullname": "censor"},{"code": "com", "fullname": "compiler"}]};
var arr = ["cmm", "com", "cng"];

var out = data.Roles.reduce((acc, c) => {
  if (arr.includes(c.code)) acc.push(c.fullname);
  return acc;
}, []);

console.log(out);

Answer 4

To efficiently extract specific data, using a for/loop is still the preferred method:

const data = {"Roles" : [{"code": "cmm", "fullname": "commentator"},{"code": "cmp", "fullname": "composer"},{"code": "cnd", "fullname": "conductor"},{"code": "cng", "fullname": "cinematographer"},{"code": "cns", "fullname": "censor"},{"code": "com", "fullname": "compiler"}]};
var arr = ["cmm", "com", "cng"];

const out = [];
for (let i = 0; i < data.Roles.length; i++) {
  const el = data.Roles[i];
  if (arr.indexOf(el.code) > -1) out.push(el.fullname);
}

console.log(out);

Although using reduce provides a more functional and cleaner approach, it may not be as efficient. It allows direct extraction of desired data without the need for filter followed by map.

const data = {"Roles" : [{"code": "cmm", "fullname": "commentator"},{"code": "cmp", "fullname": "composer"},{"code": "cnd", "fullname": "conductor"},{"code": "cng", "fullname": "cinematographer"},{"code": "cns", "fullname": "censor"},{"code": "com", "fullname": "compiler"}]};
var arr = ["cmm", "com", "cng"];

var out = data.Roles.reduce((acc, c) => {
  if (arr.includes(c.code)) acc.push(c.fullname);
  return acc;
}, []);

console.log(out);

Answer 5

Answer №3

To retrieve the necessary values, you must filter the array before mapping it. Give this a shot:

let output = object["Roles"].filter(function(item) { return arr.includes(item.code)}).map(filteredObject => filteredObject.fullname);

Answer 6

To retrieve the necessary values, you must filter the array before mapping it. Give this a shot:

let output = object["Roles"].filter(function(item) { return arr.includes(item.code)}).map(filteredObject => filteredObject.fullname);

Using a JSON file to map an array in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the method for flipping a JSON object?

Exploring the functionality of AngularJS routing on a webpage

Is it possible to store hundreds of thousands of 10-character strings within an array in MongoDB design?

Issue: The system is unable to locate the module titled '@kyleshockey/object-assign-deep'

Is it possible to utilize the NavigationTimingAPI with asynchronous requests?

Customize ACF Google Map - Adjusting the Look?

Changing background color using jQuery ID selector

Troubleshooting the CORS problem with 'Access-Control-Allow-Origin' while combining Vue.js for the front-end and Express for the back-end

Building Your Own Custom Mobile Global Breakpoint Plugin with Vuetify in Nuxt.js

Embed HTML code into a React/Next.js website

Harnessing the Power: Ajax Combined with JQuery

What is preventing bots and crawlers from detecting Next.js meta tags?

Generating a constantly evolving 3D model and keeping it current within a web browser

Changing Json format into a Google Datastore Entity

Looking to learn how to utilize the setInitial method in Java programming?

Discover the worth chart with JQ

Generate a new tree structure using the identifiers of list items within an unorganized list

Converting user input from a string to an object in JavaScript: a comprehensive guide

Using node.js to make an HTTP request and parse JSON data with the

Can a prototype be created in JavaScript for a "FileList" object type that enables the construction and addition of a "File" object within it?