Gaining entry into a JSON object

I'm currently working on a web page that utilizes API data from the Breaking Bad website. I have received this data in JSON format, but I am struggling to figure out how to access only the objects where the "author" is "Walter White." Here is the data I've received:

[{"quote_id":1,"quote":"I am not in danger, Skyler. I am the danger!","author":"Walter White","series":"Breaking Bad"},{"quote_id":2,"quote":"Stay out of my territory.","author":"Walter White","series":"Breaking Bad"},{"quote_id":3,"quote":"IFT","author":"Skyler White","series":"Breaking Bad"},{"quote_id":4,"quote":"I watched Jane die. I was there. And I watched her die. I watched her overdose and choke to death. I could have saved her. But I didn’t.","author":"Walter White","series":"Breaking Bad"},{"quote_id":5,"quote":"Say my name.","author":"Walter White","series":"Breaking Bad"}]

javascriptjson

Answer №1

One way to filter out specific data from an array is by using the .filter() method. Here's an example:

var characters = [{id:1,name:"Harry Potter",house:"Gryffindor"},{id:2,name:"Hermione Granger",house:"Gryffindor"},{id:3,name:"Draco Malfoy",house:"Slytherin"},{id:4,name:"Luna Lovegood",house:"Ravenclaw"}];

var result = characters.filter(c => c.house === 'Gryffindor');
console.log( result )
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer №2

To achieve a case-insensitive result, you can utilize the filter method along with toLowerCase().

const filterKey = 'walter white';
let data = [{
  "quote_id": 1,
  "quote": "I am not in danger, Skyler. I am the danger!",
  "author": "Walter White",
  "series": "Breaking Bad"
}, {
  "quote_id": 2,
  "quote": "Stay out of my territory.",
  "author": "Walter White",
  "series": "Breaking Bad"
}, {
  "quote_id": 3,
  "quote": "IFT",
  "author": "Skyler White",
  "series": "Breaking Bad"
}, {
  "quote_id": 4,
  "quote": "I watched Jane die. I was there. And I watched her die. I watched her overdose and choke to death. I could have saved her. But I didn’t.",
  "author": "Walter White",
  "series": "Breaking Bad"
}, {
  "quote_id": 5,
  "quote": "Say my name.",
  "author": "Walter White",
  "series": "Breaking Bad"
}].filter(item => item.author.trim().toLowerCase() === filterKey);

console.log(data)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Is there a way to make an AJAX call where one of the parameters is a computed State in VueX? For instance, if I use this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (using MapState), sometimes it returns ' ...

javascriptvue.jsvuejs2axiosvuex

Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

I am facing an issue in Angular 4 where I am attempting to retrieve details from a specific user when clicking on the 'user link profile'. However, I am unable to subscribe to my function because the return value of switchMap is AnonymousSubject ...

javascriptangulartypescriptobservable

Ways to effectively pass arguments to the callback function within the catch function in JavaScript

While working on my code, I suddenly felt the need to pass an extra argument, "msg", to the callback function renderError(). This extra argument should be passed along with the default error argument generated by the catch function itself. I tried doing i ...

javascriptcallbackasynccallback

When no values are passed to props in Vue.js, set them to empty

So I have a discount interface set up like this: export interface Discount { id: number name: string type: string } In my Vue.js app, I am using it on my prop in the following way: export default class DiscountsEdit extends Vue { @Prop({ d ...

javascripttypescriptvue.js

What is preventing Angular from letting me pass a parameter to a function in a provider's useFactory method?

app.module.ts bootstrap: [AppComponent], declarations: [AppComponent], imports: [ CoreModule, HelloFrameworkModule, ], providers: [{ provide: Logger, useFactory: loggerProviderFunc(1), }] ...

javascriptangulartypescriptdependency-injectionangular5

The Json library's parse() function was unable to resolve a basic parsing issue

I'm encountering a compile time error on Json.parse in the code snippet below, with the message cannot resolve symbol parse. Despite passing in an eventData parameter of type String, and considering that parse() accepts a string input, why is this ope ...

jsonscalaparsingplayframework

The Optimal Approach for Importing Libraries across Multiple Files

I have two files - one containing the main code execution, and the other solely consisting of a class. For instance: File_1: const _ = require('underscore'), CoolClass = require('CoolClass'); _.map(//something) Files_2: const _ = ...

javascriptnode.jsecmascript-6

"Encountering a 404 error when submitting a contact form in Angular JS

Looking to set up a contact form for sending emails with messages. Currently diving into Angular Express Node Check out the controller code below: 'use strict'; /** * @ngdoc function * @name exampleApp.controller:ContactUsCtrl * @descripti ...

javascriptangularjsnode.jsformsexpress

Tips on creating a JSON structure with metadata and a result pair

I'm currently working on developing REST client wrappers in multiple languages (Java, C#, Objective-C, and Python) for a REST service that I do not have access to the source code for. I am facing challenges with modeling in all of them, which leads me ...

jsonoopmodeling

What is the best way to eliminate additional values depending on the one I have chosen?

When utilizing the Vuetify v-autocomplete component with the multiple prop, we are able to select multiple values. How can I deselect other values based on the value I have selected? For instance: If I choose the main value, all others will be deselecte ...

javascriptvue.jsvuetify.js

Unravel the JSON data array and seamlessly add it to a MySQL database

Looking for some help here as I am struggling with extracting Json data and inserting it into a MySQL database using PHP. Any assistance would be greatly appreciated. {"CityInfo":[{"CityCode":"5599","Name":"DRUSKININKAI"},{"CityCode":"2003","Name":"KAUNAS ...

phpmysqlarraysjson

What are the steps to displaying Jade in an Electron application?

With Express, you can easily establish the view engine as Jade by using the following code snippet: app.set('view engine', 'jade'); This enables Express to parse and deliver compiled HTML from Jade files directly. But how can this be ...

javascriptexpresspugelectron

Steps to convert a phone number into JSON format

The primary focus Upon receiving an MQTT packet, it is displayed as an ASCII array in the buffer after being printed using stringify: packet = { "cmd": "publish", "retain": true, "qos": 1, "dup& ...

javascriptnode.jsjson

Renaming Multiple .JSON Files in a Subfolder with Python and Pandas

I'm struggling with renaming multiple Json files nested in various subfolders. My goal is to replace each .json file name with a count variable. Currently, all the .json files are named messages_1.json within their respective subfolders. For example, ...

pythonjsonpandascsvpython-os

Suggestions for displaying combination data in JSON format?

Currently, I am working on integrating an API that provides information on the number of users using a specific app. For instance, let's say I need to retrieve data indicating 10 individuals are exclusively using App1, 8 are solely using App2, 8 are ...

node.jsjsonspringapi-design

Adjusting the Connection header in a jQuery ajax request

I've been attempting to modify the Connection header using the code below, but so far, I haven't had any success jQuery.ajax({ url: URL, async: boolVariable, beforeSend: function(xhr) { xhr.setRequestHeader("Connection ...

javascriptjqueryxmlhttprequestjquery-1.3

PHP/AJAX user action history manager

Is there a library available that offers undo/redo functionality with a complete history for a web application? One possible solution could be a system using php/javascript/ajax where you can record the opposite action and variable state for each user acti ...

phpjavascriptajaxundo-redo

Is there a way for me to retrieve the text response of a fetch request from client-side JavaScript to fastify server?

In my fastify node.js application, I am encountering an issue where I can see the text results of a promise right before it is returned to the browser's JavaScript code. However, once the promise is returned to the browser JS, all I get is an empty st ...

javascriptnode.jsfetchfastify

Retrieving Form Validation Error Value in AngularJS

Incorporating AngularJS 1.2 RC2 and utilizing Bootstrap for CSS, I have constructed a straightforward form as shown below: <form class="form-horizontal" name="form" novalidate> <label class="col-lg-2 control-label" for="name">Name</labe ...

javascripthtmlformsangularjs

Create static HTML files using an Express server

Recently, I developed a nodejs web project using express-js and ejs. However, upon further reflection, it occurred to me that hosting it as static html files on Netlify might be more cost-effective than running it as a nodejs app on Heroku. Since the data ...

javascriptnode.jsexpressnpmnetlify