I have the following JSON object:
Object { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" }
This JSON is a response data returned from a get call(HttpClient Angular).
So now, I need to populate this into the following to display as a dropdown list.
countryList: { countryCode: string; countryName :string }[];
I tried doing the following :
for (const key in resData) {
if (resData.hasOwnProperty(key)) {
var obj ={
countryCode :key,
countryName : resData[key]
}
this.countryList.push(obj);
}
}
But when I execute I'm getting this error
"_this.countryList.push is not a function"
What am I doing wrong?
The code you’ve posted only defines the type of countryList. You need to also initialise it as an empty array before you can push to it - see below.
countryList: { countryCode: string;countryName :string }[] = [];
You can get entries from the object and then map it to the array of objects:
Object.entries(countries).map(([key, value]) => ({
countryCode: key,
countryName: value
}))
you need to declare countryList as list.
var resData={ JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" };
countryList=[];
for (const key in resData) {
if (resData.hasOwnProperty(key)) {
var obj ={
countryCode :key,
countryName : resData[key]
}
countryList.push(obj);
}
}
console.log(countryList)
Related
Hi i'm having an object like [{name: 'abc', country : 'US'},{name: 'xyz', country : 'IN'},{name: 'mno', country : 'US'},{name: 'pqr', country : 'IN'}]
I need to convert object above into
{ US : [abc,mno], IN: [xyz,pqr] } using angular js. can anyone help me to achive this.
Use Array.reduce() to convert the array of objects into a object derived from the array data.
const input = [
{name: 'abc', country : 'US'},
{name: 'xyz', country : 'IN'},
{name: 'mno', country : 'US'},
{name: 'pqr', country : 'IN'}
];
// use reduce to loop over each element and return a constructed object
const output = input.reduce(function(accumulator, element) {
// check to see if there is an entry for this country
if (!accumulator[element.country]) {
// if not create a new array with just this name as the only entry
accumulator[element.country] = [element.name];
} else {
// already exists, push the new value
accumulator[element.country].push(element.name);
}
// return the object
return accumulator;
}, {}); // <- initial value
The variable output results in -
{
"US": [
"abc",
"mno"
],
"IN": [
"xyz",
"pqr"
]
}
I want to receive all city name's from an external .js file to compare them later with the input value. The problem is when I destructure like const { city } = this.state.cities; and console.log, it return undefined.
const cities = [
{
key: 1,
city: "Cambridge"
},
{
key: 2,
city: "Durango"
},
{
key: 3,
city: "Atlanta"
},
{
key: 4,
city: "Sacramento"
},
{
key: 2,
city: "San Francisco"
}
];
export default cities;
and JSX file
class Filters extends React.Component {
state = {
cities: cities,
categories: categories,
types: types,
salaries: salary
};
How do I can get to cities without setting a specific index of object?
If you don't want to get an object by array index, you can get it by key or city like:
cities.find(e => e.key === 1)
or
cities.find(e => e.city === 'city')
I'm trying to get the key of these json objects in order to create a new object with extra filed to create table headers in a React app. JSON data:
let example = [
{
id: 1,
city: 'New York',
},
{
id: 2,
city: 'Paris',
},
]
The function:
getKeys() {
return example.map((key) => {
return {
cityName: key, // gets the whole array
capital: false,
};
});
}
I tries Object.keys( example);, it returns integers; 0, 1.
How can I get the keys in this case? Thanks.
You are trying to map the keys for an array since example is an array. If the data are consistent throughout the array get the first element example[0] and do Object.keys().
So Object.keys(example[0])
There's no need to get the keys if you just want to add a property to the items in the array. I think there's a misunderstanding about .map, which gives you a single item/object in the array, not the keys.
Something like this perhaps?
let example = [{
id: 1,
city: 'New York',
}, {
id: 2,
city: 'Paris',
}];
const modifiedArray = function(arr) {
return arr.map(item => {
return {
id: item.id,
cityName: item.city,
capital: false,
};
})
}
const newArray = modifiedArray (example);
console.log(newArray )
I have a JSON array of objects, I want to create a dynamic table columns/headers based on it in React.
The data:
example = [
{
id: 0,
city: 'New York',
},
{
id: 1,
city: 'Paris',
},
]
I want to iterate through the array, get the key and add extra fields.
So far I have:
columns() {
return Object.keys(Example[0]).map((key) => {
return {
cityName: key,
capital: false,
};
});
}
I get the keys, but they are unordered (random) and the extra field is added to all the objects. I want to get each key to use it as table header (column name) and be able to change capital for each object.
How can I do that in React?
You can use Array.map for this.
example = [
{
id: 0,
city: 'New York',
},
{
id: 1,
city: 'Paris',
},
];
example.map((obj) => {
return {
CITY : obj.city,
ID : obj.id
// Do whatever with the objects
}
})
arr => arr && arr[0] ? object.keys(arr[0]) : [];
make sure all items in array have same keys
I am working on a reactJS+Flux Project.I am trying to convert my website into multi-language. I already have my dictionary of all the possible value coming from my API. I want to replace actual value of API with my dictionary value.
for example:
from API I am getting following format data:
data = {
basic: {
name: "ajay kumar",
country: "India",
State: "Maharashtra",
City: "Mumbai"
}
}
in my hindi dictionary I already got all value like:
data= {
hindi: {
"country" : {
"India" : "भारत"
},
state: {
"Andaman & Nicobar Islands": "अंदमान अँड निकोबार आयलँड्स",
"Andhra Pradesh": "आंध्र प्रदेश",
"Arunachal Pradesh": "अरुणाचल प्रदेश",
"Assam": "आसाम",
"Bihar": "बिहार",
"Maharashtra": "महाराष्ट्र"
},
"city" :{
"Mumbai" : "मुंबई"
}
}
}
I want to change all of my value from given dictionary.
First of all make sure that your dictionary can not be a simple:
{englishWord1: hindiWord1,
....
englishWordn: hindiWordn}
If it can not, I would extract the keys from data.basic with Object.keys(object) then I would define I function that map the word in your dictionary with the ones in your object (translate(section, word, dictionary) => [section, translatedWord]).
With Object.keys(object) you obtain an array of keys that correspond to the sections in you dictionary (Country,State ecc) then with map you transform each element in the array for di that you use translate(..) and you obtain an array of translated word: [[section1:translatedWord1],...[sectionn,translatedWordn]]. Then with a function that take array and return an object (arrayToObject([])=>{}) you'll have your translated object.
//This is your dictionary
engToHindi = {
Country : {
India: 'valueIndia',
},
State: {
Maharashtra: 'valueMaharashtra',
},
City :{
Mumbai: 'valueMumbai',
}
}
data = {
basic: {
Name: "ajay kumar",
Country: "India",
State: "Maharashtra",
City: "Mumbai"
}
}
function arrayToObject(array){
object = {}
array.map(x => {object[x[0]] = x[1]});
return object;
}
function translate(section, word, dictionary){
// If the section doesn't exist do not transalate
if (dictionary[section] === undefined){
return [section, word];
}
translatedWord = dictionary[section][word];
return [section, translatedWord];
}
arrayToTransform = Object.keys(data.basic).map(key => translate(key, data.basic[key], engToHindi))
console.log(arrayToTransform)
transformed = arrayToObject(arrayToTransform);
console.log(transformed);
Please make sure that you need the dictionary divided in sections.