Retrieve a JSON object from a Knockout observable array using the object's ID

I'm struggling to find examples of ko.observablearrays that deal with complex JSON objects instead of simple strings. I have an observable array containing a large JSON object with several properties, and I need to retrieve a specific object based on its id property. Here's the code snippet I currently have for getting the Id:

self.selectedOrgId.subscribe(function (currentOrgId) {
    alert(currentOrgId);
}, self);

The observable array is populated using an ajax get request and looks something like this:

[
{"userGuid":"37ab100e-f97b-462a-b3f4-79b8fbe24831",
"orgId":1,
"orgName":
"company ltd",
"isHiring":true,
...snip...}
   more...
]

Could someone help me figure out how to search through my array and retrieve the object with the matching orgId?

javascriptarraysjsonknockout.js

Answer №1

In order to locate a specific item by its id, you can utilize the ko.utils.arrayFirst method like so:

var itemId = '1';
var selectedItem = ko.utils.arrayFirst(this.items(), function(item) {
    return item.orgId == itemId;
});

Alternatively, you have the option to create a computed property that retrieves the selected item based on its id.

self.selectedItem = ko.computed({
    read : function(){
        return ko.utils.arrayFirst(this.items(), function(item) {
            return this.selectedOrgId() == item.orgId;
        });
   },
   owner : self
});

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

Harnessing the power of Shopify's Predictive Search API

I am currently working on implementing a custom solution using the predictive search API for when a product is out of stock. Our goal is to display an alternate product that we have chosen, rather than relying on automated recommendations. We have tagged a ...

jsonajaxshopifyshopify-api

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

javascripthtmlcssz-index

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger

Are we looking at a declaration of an arrow function? Is this concept even real?

I have been exploring the concept of function expressions versus function declarations with arrow functions. From my understanding, this is an example of an arrow function expression: const fred = greeting = () => { console.log("Hello from arrow ...

javascriptarrow-functionsfunction-expression

Managing UTC calculations with date-fns library in Node.js: A complete guide

Having some trouble with the date-fns library when trying to manipulate UTC dates. When attempting to add or subtract dates, it seems like the library isn't handling them correctly. An example: > const { add } = require('date-fns'); undef ...

javascriptnode.jsutcdate-fns

Encountering a problem with vis js events

While constructing a timeline in my vue.js application, I opted to utilize vis.js. Unfortunately, I encountered some issues when attempting to incorporate events. Initially, setting @drop="myDropCallback()" did not trigger the function upon dropping an ite ...

javascriptvue.jsvuejs2vis.jsvis.js-timeline

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

javascriptcssunit-testingbrowsersyntax-error

Ignore linting errors in the Webpack React Fast Refresh plugin for faster performance

I have integrated the following plugin for Hot Module Replacement (HMR): https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin. How do I prevent it from blocking the page display due to non-breaking errors, such as linting issues? Here is a ...

javascriptreactjswebpack

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

javascriptjqueryhtmlcss

What is the purpose of sorting an object using the sequence defined in an array?

Have you ever wondered how the sortWeekFunction function can rearrange an object based on a predefined array order? It may seem complex at first glance, but let's break down how this code actually works. const weeksArr = ['sunday', ' ...

javascriptarraysalgorithmsortingobject

The functionality of Protovis JavaScript is not supported within a dropdownlist's onchange event

I encountered an issue where one block of code works fine on its own, but when combined with another block, only one of them functions properly. The problem arises when I try to invoke a method from a dropdownlist using the onchange event, especially afte ...

javascriptdom-eventsprotovis

The hovering effect on the image link is causing the surrounding div to stretch too far

Whenever I hover over specific points below an image link wrapped in a div, it triggers the hovering effect for the CSS-created image link. Despite trying various solutions like overflow:hidden and display:inline-block, nothing seems to resolve this issue. ...

javascripthtmlcssweb-frontend

Apply a sub-schema conditionally, based on the property of another file

Is it possible for json-schema to have a conditional sub-schema based on the property value from another file? For example: Jsons: another.json { "honey": "honey" } main.json { "hello": "abc" } Schema { "type": "object", "properties": { ...

jsonvalidationconditional-statementsschemajsonschema

Stop useEffect from triggering during the first render

I'm working on implementing a debounce functionality for a custom input, but I'm facing an issue where the useEffect hook is triggered during the initial render. import { useDebouncedCallback } from "use-debounce"; interface myInputProps { ge ...

javascriptreactjstypescriptreact-hooks

Developing a dynamic user interface using an Angular framework and populating it with

I am currently learning Angular (version 1) and facing an issue with my layout. I need to dynamically change the navigation based on the type of user that is logged in. To achieve this, I make an API request when the page loads to fetch the user object dat ...

javascriptangularjsajax

Tips for indicating an error when an array contains empty values

Object = { 0 : { NAME: 'A' , PET :'DOG' , AGE : 'NINE' }, 1 : { NAME: 'B' , PET :'CAT' , AGE : 'TEN' }, 2 : { NAME: 'C' , PET :'TURTLE' , AGE : '' } } HT ...

javascripthtmlarraysangularjsdropdown

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

When a ng-model is added, the input value disappears

i am currently working on a form that contains angular values. <tr ng-repeat="alldata in c.da"> <td>{{alldata.id}}</td> <td><input type="text" class="form-control" value="{{alldata.name}}" ...

javascriptangularjs

How to Implement Force Unmount in Vue 3 When Deactivated

I've developed a VUE app that makes use of the keep-alive method in the router. There are multiple pages that should only be loaded once, but certain specific pages need to be reloaded every time they are activated. <template> <router-view ...

javascriptvue.jsvue-routervuejs3vue-router4

What are the steps to configure MongoDB on Heroku using MongoHQ and Node.js?

I am currently using a local application, which is what I'm most familiar with. Heroku provided the following snippet of code: var mongo = require('mongodb'); var mongoUri = process.env.MONGOLAB_URI || process.env.MONGOHQ_URL || &apos ...

javascriptnode.jsmongodbherokuexpress