We Keep Coding

Access data from JSON objects [duplicate]

This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 1 year ago.
I have this code in js with data from a series and I would like to access only some data, such as name, number of episodes, summary, etc. To put in a box, which is in html. However, when making the JSON code (at the end) in text format (and it should be that way), the code is limited to printing just one piece of information (let text = JSON.stringify(bd.name,bd.resumo,bd.note );),this is i tried. How can I make it print more than one information I want inside the html box?
const db = {
name: "Stranger Things",
genera: [
"Mystery",
"Sci-Fi & Fantasy",
"Drama"
],
num_episodes: 25,
season_num: 3,
grade: 8.5,
summary: "When a boy disappears, the whole city participates in the search. But what they find are secrets, supernatural forces and a girl.",
cast: [
{
name: "Winona Ryder",
character: "Joyce Byers",
},
{
name: "David Harbour",
character: "Jim Hopper",
},
{
name: "Finn Wolfhard",
character: "Mike Wheeler",
},
{
name: "Millie Bobby Brown",
character: "Eleven",
},
{
name: "Gaten Matarazzo",
character: "Dustin Henderson",
},
{
name: "Caleb McLaughlin",
character: "Lucas Sinclair",
},
{
name: "Natalia Dyer",
character: "Nancy Wheeler",
},
{
name: "Charlie Heaton",
character: "Jonathan Byers",
},
{
name: "Sadie Sink",
character: "Max Mayfield",
},
{
name: "Dacre Montgomery",
character: "Billy Hargrove",
},
{
name: "Dear Buono",
character: "Karen Wheeler",
},
{
name: "Noah Schnapp",
character: "Will Byers",
},
{
name: "Joe Keery",
character: "Steve Harrington",
},
{
name: "Priah Ferguson",
character: "Erica Sinclair",
},
{
name: "Maya Hawke",
character: "Robin",
}
],
seasons: [
{
number 1,
number_episodes: 8,
display: "2016-07-15",
summary: "The small town of Hawkins is the scene of strange events. After the disappearance of a boy, a girl appears with supernatural powers.",
episodes: [
{
number 1,
name: "Chapter One: The Disappearance of Will Byers",
grade: 7.79,
summary: "On his way home, Will is terrified of something. Not far away, a secret laboratory holds a sinister secret."
},
{
number 2,
name: "Chapter Two: The Maple Street Stranger",
grade: 8,194,
summary: "Lucas, Mike, and Dustin try to talk to the girl they meet. Hopper has questions for an extremely anxious Joyce."
},
{
number: 3,
name: "Chapter Three: Dammit",
grade: 8,634,
summary: "Increasingly worried, Nancy seeks out Barb and finds out what Jonathan has been up to. Joyce is convinced that Will is trying to communicate with her."
},
{
number 4,
name: "Chapter Four: The Body",
grade: 8,341,
summary: "Joyce refuses to believe Will died, and tries to communicate with him. The boys transform Eleven's look. Nancy and Jonathan end up teaming up."
},
{
number 5,
name: "Chapter Five: The Flea and the Acrobat",
grade: 8.16,
summary: "Hopper manages to enter the lab while Nancy and Jonathan confront the forces that took Will away. The boys ask Mr. Clarke how he goes to another dimension."
},
{
number: 6,
name: "Chapter Six: The Monster",
grade: 8,371,
summary: "Desperate, Jonathan searches for Nancy in the dark, but Steve does the same thing. Hopper and Joyce discover the truth about the experiments conducted in the lab."
},
{
number: 7,
Name: "Chapter Seven: The Bathtub",
grade: 8,233,
summary: "Eleven tries to reach Will, but Lucas gives the danger alert. Nancy and Jonathan show the police the images captured by the camera."
},
{
number: 8,
name: "Chapter eight: Upside down",
grade: 8,437,
summary: "Dr. Brenner interrogates Hopper and Joyce while the boys and Eleven wait in the gym. Nancy and Jonathan prepare for a new battle."
}
]
},
{
number 2,
number_episodes: 9,
display: "2017-10-27",
summary: "Almost a year after Will's strange disappearance, life in Hawkins is far from returning to normal.",
episodes: [
{
number 1,
name: "Chapter One: Mad Max",
grade: 7,894,
summary: "On Halloween eve, a rival messes things up in the arcade. Skeptical, Hopper inspects a field of rotting pumpkins."
},
{
number 2,
name: "Chapter Two: Trick or Treat, Freak",
grade: 8,018,
summary: "After Will sees something terrible on trick-or-treating night, Mike wonders if Eleven is still around. Nancy faces the truth about Barb's death."
},
{
number: 3,
name: "Chapter Three: The Tadpole",
grade: 8,
summary: "Dustin adopts a strange pet, and Eleven grows more and more impatient. Well-meaning, Bob encourages Will to face his fears."
},
{
number 4,
name: "Chapter Four: Will the Sage",
grade: 8,241,
summary: "Weakened, Will opens up to Joice, and the result is disturbing. While Hopper searches for the truth, Eleven makes a startling discovery."
},
{
number 5,
name: "Chapter Five: Dig Dug",
grade: 8,196,
summary: "Nancy and Jonathan exchange conspiracy theories with a new ally, and Eleven is looking for someone from her past. 'Smart Bob' deals with a tricky problem."
},
{
number: 6,
name: "Chapter Six: The Spy",
grade: 8,386,
summary: "The link between Will and a sinister evil force grows stronger, but no one is quite sure how to stop it. Dustin and Steve create an unlikely bond."
},
{
number: 7,
name: "Chapter Seven: The Lost Sister",
grade: 6918,
summary: "Psychic visitors drag Eleven toward a group of violent outcasts and an angry girl with a dark past."
},
{
number: 8,
name: "Chapter Eight: The Mind Flayer",
grade: 8,417,
summary: "An unlikely hero arises when a deadly incident causes the Hawkins Laboratory to close, leaving Will and several others trapped inside."
},
{
number: 9,
name: "Chapter Nine: The Portal",
grade: 8,345,
summary: "Eleven plans to finish what he started. The survivors increase the pressure against the monstrous force that holds Will hostage."
}
]
},
{
number: 3,
number_episodes: 8,
display: "2019-07-04",
summary: "Novel in the air. A brand-new mall. Crazed rats running into danger. It's the summer of 1985 in Hawkins. And one summer can change everything.",
episodes: [
{
number 1,
name: "Chapter One: Are You Listening to Me, Suzie?",
grade: 7,511,
summary: "Summer is a time for temp jobs and new dating. But the mood changes when Will notices something is wrong with Dustin's radio broadcast in Russian."
},
{
number 2,
name: "Chapter Two: The Case of the Rats",
grade: 7,806,
summary: "Nancy and Jonathan follow a a clue. Steve and Robin participate in a secret mission, and Max and Eleven go shopping. Billy has disturbing visions."
},
{
number: 3,
name: "Chapter Three: The Missing Lifeguard",
grade: 7,926,
summary: "Eleven and Max are looking for Billy. Will plans a day without the girls. Steve and Dustin ambush, and Joyce and Hopper return to Hawkins National Laboratory."
},
{
number 4,
name: "Chapter Four: The Proof of the Sauna",
grade: 8,414,
summary: "The gang gathers to face a terribly familiar evil. Karen asks Nancy to continue the investigation. Robin gets a very useful mall blueprint."
},
{
number 5,
name: "Chapter Five: The Devoured",
grade: 7,769,
summary: "Strange surprises lurk in an old farm and in the depths of the Starcourt Mall. The Mind Flayer grows stronger."
},
{
number: 6,
name: "Chapter Six: E Pluribus Unum",
grade: 7,963,
summary: "Dr. Alexey reveals what the Russians are building, and Eleven sees where Billy has been. Dustin and Erica plan a daring rescue."
},
{
number: 7,
name: "Chapter Seven: The Bite",
grade: 8,
summary: "With time running out and an assassin drawing nearer, Hopper's team races back to Hawkins. There, Eleven and the rest of the gang prepare for war."
},
{
number: 8,
name: "Chapter Eight: The Battle of Starcourt",
grade: 8.8,
summary: "The Mind Flayer causes terror in the food court. Down below, in the darkness, the future of humanity is at stake."
}
]
}
]
}
const box = document.querySelector('#box');
let text = JSON.stringify(db.name,db.summary,db.note);
box.innerText = text;
let object = JSON.parse(text);
console.log(object);
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Objetos</title>
<style>
#box{
padding: 1em;
border: 2px solid #333;
}
</style>
</head>
<body>
<div id = "box"></div>
<script type="text/javascript" src="db.js"></script>
</body>
</html>

let text = JSON.stringify(db.name,db.summary,db.note);
this line of code is only returning the db.name, db.summary, and db.note
to access more info you can just get all of the data back (db) or if you want to use something more specific you can type db.seasons.summary and it will return all of the seasons summaries. Also your going to need to use fetch() to get that data

Pushing objects with same keys but different values to array conditionally to avoid typing

I have this array of objects with same keys.
const services = [
{
trade: "Electrical",
expertise: [
"• Lighting installations",
"• Facade lighting",
"• Lighting automation solutions, Low voltage (LV) power distribution",
"• Emergency lighting",
"• MV power distribution, Power monitoring systems, Soar power solutions and Vertical Transportation Solar power solutions.",
],
icon: faBolt,
},
{
trade: "Heating, Ventilation & AC (HVAC)",
expertise: [
"• Central and distributed chilled water systems, underfloor cooling.",
"• Microclimate control.",
"• Variable refrigerant flow (VRF), variable air volume (VAV), split air conditioning and ground source energy systems (geothermal).",
],
icon: faCog,
},
{
trade: "Fire Fighting Systems",
expertise: [
"• Sprinkler system, CO2, foam, clean agent suppression systems (NOVAC, FM200 and ENERGIN)",
],
icon: faFireExtinguisher,
},
{
trade: "Plumbing, Drainage & Specialist System",
expertise: [
"• Water treatment",
"• Sewage treatment plants (STP's), solar hot water systems and desalination plant",
],
icon: faWrench,
},
{
trade: "Extra-low voltage (ELV) Systems",
expertise: [
" • Building management systems (BMS's)",
"• Fire alarm system",
"• Intruder alarms",
"• Access controls",
"• Closed circuit television (CCTV)",
"• Intercoms PA Systems",
"• PA Systems",
],
icon: faSuperpowers,
},
];
Is there any why to avoid writing these object keys again and again 9 times and just push these objects to array
. I am thinking conditionally pushing objects based on index using for loop but cannot figure out exact way so that i only write keys once.
i am coding using react. this array is mapped as follow:
{services.map((service, index) => {
return (
<Zoom key={index} in={true} timeout={400}>
<Grid xs={12} md className={classes.gridItemCSServices} item>
<FontAwesomeIcon
icon={service.icon}
spin
size="2x"
color="#0062ae"
fixedWidth
></FontAwesomeIcon>
<Typography className={classes.listHeadingCSServices}>
{service.trade}
</Typography>
<ul className={classes.listCSServices}>
{service.expertise.map((experty, index) => {
return <li key={index}>{experty}</li>;
})}
</ul>
</Grid>
</Zoom>
);
})}
What would be the best way for such scenarios ??
Thanks in advance

AngularJS filter search

I have tried the filter logic from angular to one of the unordered list.
But, the search filter is working after typed 3 characters of the name, sometimes giving wrong search results.
<input type='text' ng-model='searchString' placeholder="Search a name..." />
<ul class="nav">
<li class="active" ng-repeat="item in artists.People | filter :searchString">
<a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
</li>
</ul>
JSON:
{
"People":[
{
"name":"Andrew Amernante",
"rating":3,
"img":"http://www.fillmurray.com/200/200",
"Description":"Gluten­free cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes":[
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
},
{
"name":"Frank Wang",
"rating":5,
"img":"http://www.fillmurray.com/200/201",
"Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes":[
"Frank",
"Manchester United",
"Football",
"Programming"
],
"Dislikes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
},
{
"name":"Sissi Chen",
"rating":5,
"img":"http://www.fillmurray.com/200/202",
"Description":"Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
"Likes":[
"Cats",
"the beach",
"Chopin",
"Blue things"
],
"Dislikes":[
"Birds"
]
},
{
"name":"Diego Garcia",
"rating":2,
"img":"http://www.fillmurray.com/200/204",
"Description":"Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a go­cart, powered by my ownsense of self­satisfaction. You don't win friends with salad.",
"Likes":[
"Talking Spanish",
"Spanish food",
"Spanish things",
"Football"
],
"Dislikes":[
"Not talking spanish",
"Chopin"
]
},
{
"name":"Fuad Rashid",
"rating":4,
"img":"http://www.fillmurray.com/200/206",
"Description":"Gluten­free cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes":[
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
}
]
}
Here is the plnkr code.
Ex: Start typing 'si', you will end up with two results where first one(frank wang) is not correct.
And, this is the reference plnkr where I'm referring for.

You would need to specify which object property, in this case name for the filter to filter against:
<input type='text' ng-model='searchString' placeholder="Search a name..." />
<ul class="nav">
<li class="active" ng-repeat="item in artists.People | filter: { name: searchString }">
<a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
</li>
</ul>
You would need to set the initial value of searchString to an empty string as well to match against all people when no text has been entered.
$scope.searchString = '';
Here is a Plunker demonstrating the functionality.
Hopefully that helps!

You can create your own customized filter to specify on which property you need to search:
$scope.searchTextByName = function(artist){
if($scope.searchText !== undefined){
if(artist.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) > -1 ){
return artist;
}
}
}
Otherwise, it will match on all JSON value of single people object with your searchText key.

How to bind to a json key if it always gets returned with a different/random name?

I am busy with a angular 4.x app where I am trying to display a random wikipedia article. The JSON I see in chrome dev tools under query/pages alwasys has a different nubered pageID. Instead of returning pages as an array they return it as a JSON object which always has a different name so I'm not sure how I can turn that into a typescript interface or bind to it seeing as the name is aways different? Any idea how I can go about this?
the JSON I get from the wikipedia api:
{
"batchcomplete": "",
"continue": {
"grncontinue": "0.241230031087|0.241230543855|19422120|0",
"continue": "grncontinue||"
},
"warnings": {
"extracts": {
"*": "\"exlimit\" was too large for a whole article extracts request, lowered to 1."
}
},
"query": {
"pages": {
"742585": {
"pageid": 742585,
"ns": 0,
"title": "Speedway",
"extract": "<p><b>Speedway</b> may refer to:</p>\n<h2><span id=\"In_racing\">In racing</span></h2>\n<ul><li>Oval track racing, motor racing on an oval track which turns in one direction</li>\n<li>Cycle speedway, a form of bicycle racing</li>\n<li>Motorcycle speedway, a form of motorcycle sport</li>\n<li>Dirt track racing, known as speedway in Australia and New Zealand</li>\n</ul><h2><span id=\"Other_uses\">Other uses</span></h2>\n<dl><dt>Placenames</dt>\n</dl><ul><li>Speedway, California, former town in Butte County</li>..."
}
}
}
}

Use Object.keys to get the Keys inside the Object as Array
var data = {
"batchcomplete": "",
"continue": {
"grncontinue": "0.241230031087|0.241230543855|19422120|0",
"continue": "grncontinue||"
},
"warnings": {
"extracts": {
"*": "\"exlimit\" was too large for a whole article extracts request, lowered to 1."
}
},
"query": {
"pages": {
"742585": {
"pageid": 742585,
"ns": 0,
"title": "Speedway",
"extract": "<p><b>Speedway</b> may refer to:</p>\n<h2><span id=\"In_racing\">In racing</span></h2>\n<ul><li>Oval track racing, motor racing on an oval track which turns in one direction</li>\n<li>Cycle speedway, a form of bicycle racing</li>\n<li>Motorcycle speedway, a form of motorcycle sport</li>\n<li>Dirt track racing, known as speedway in Australia and New Zealand</li>\n</ul><h2><span id=\"Other_uses\">Other uses</span></h2>\n<dl><dt>Placenames</dt>\n</dl><ul><li>Speedway, California, former town in Butte County</li>..."
}
}
}
};
var MyArray = Object.keys(data.query.pages);
console.log('MyArray: '+ JSON.stringify(MyArray));
// Required Data
console.log('Page: '+ data.query.pages[MyArray[0]].pageid)

You can use javascript Object.keys method something like
var obj={
"batchcomplete": "",
"continue": {
"grncontinue": "0.241230031087|0.241230543855|19422120|0",
"continue": "grncontinue||"
},
"warnings": {
"extracts": {
"*": "\"exlimit\" was too large for a whole article extracts request, lowered to 1."
}
},
"query": {
"pages": {
"742585": {
"pageid": 742585,
"ns": 0,
"title": "Speedway",
"extract": "<p><b>Speedway</b> may refer to:</p>\n<h2><span id=\"In_racing\">In racing</span></h2>\n<ul><li>Oval track racing, motor racing on an oval track which turns in one direction</li>\n<li>Cycle speedway, a form of bicycle racing</li>\n<li>Motorcycle speedway, a form of motorcycle sport</li>\n<li>Dirt track racing, known as speedway in Australia and New Zealand</li>\n</ul><h2><span id=\"Other_uses\">Other uses</span></h2>\n<dl><dt>Placenames</dt>\n</dl><ul><li>Speedway, California, former town in Butte County</li>..."
}
}
}
}
var pageNo=Object.keys(obj.query.pages)[0];
console.log(pageNo)

Use formatversion=2:
action=query&format=json&prop=extracts&exlimit=1&generator=random&formatversion=2
{
"batchcomplete": true,
"continue": {
"grncontinue": "0.451777061970|0.451777269201|12035865|0",
"continue": "grncontinue||"
},
"query": {
"pages": [
{
"pageid": 18652441,
"ns": 0,
"title": "Kuczyny",
"extract": "<p><b>Kuczyny</b> <span>[kuˈt͡ʂɨnɨ]</span> is a village in the administrative district of Gmina Stawiski, within Kolno County, Podlaskie Voivodeship, in north-eastern Poland. It lies approximately 4 kilometres (2 mi) north of Stawiski, 15 km (9 mi) east of Kolno, and 75 km (47 mi) north-west of the regional capital Białystok.</p>\n<p>The village has a population of 31.</p>\n<h2><span id=\"References\">References</span></h2>\n\n<p><br></p>\n\n<p><span></span></p>"
}
]
}
}

Using Arrays in JS

So i'm trying to make a page that will pull out a fact from an array and print it out.
var fact = [
{
id: 1,
fact: "Cutis Anserina is the medical term for goosebumps.",
question: "What common occurence is Cutis Anserina the medical term for?"
option1: "Goosebumps",
option2: "Hiccups",
option3: "Laughter",
option4: "Sneezing",
correct: option1
},
{
id: 2,
fact: "The famous nursery rhyme,“Ringa Ringa Roses”, was actually based on the Black Death.",
question: "What historical event is “Ringa Ringa Roses” based on?",
option1: "The Great Depression",
option2: "American Civil War",
option3: "The Black Death",
option4: "Indian Independence Struggle",
correct: option3
},
{
id: 3,
fact: "Gobind Behari Lal is the first Indian to have won the famed Pulitzer Prize for Literature",
question: "Who is the first Indian to win the Pulitzer Price?",
option1: "Vijay Seshadri",
option2: "Gobind Behari Lal",
option3: "Jhumpa Lahiri",
option4: "Dr. Siddhartha Mukherjee",
correct: option2
},
{
id: 4,
fact: "OVI Intaglio is an ink from Swiss firm SLCPA and is used in the printing of watermark on Indian currency notes",
question: "What ink is used to print the watermark on Indian currency notes?",
option1: "OVI Intaglio",
option2: "Parker Supreme",
option3: "Bril Blue",
option4: "L'ink special",
correct: option1
},
{
id: 5,
fact: "The inhabitants of the planet Earth are called Tellurians",
question: "The inhabitants of which planet are known as Tellurians?",
option1: "Saturn",
option2: "Jupiter",
option3: "Mars",
option4: "Earth",
correct: option4
},
];
i need the program to take out only the fact when id="1", "2" etc. This page is supposed to pull out only the data marked as "fact" from array for the respective ids. Please tell me what i can add or remove
Please help :(