Getting the json array value and populating it in a dropdown list in angularjs - a step-by-step guide!

{"id":1,"firstName":"John1","lastName":"Doe1","**accountIds**":[12345,12346,12347],"recipients":[{"accountNumber":22222,"firstName":"Mary1","lastName":"Jane1"},{"accountNumber":33333,"firstName":"Mary2","lastName":"Jane2"}]}

Show the "accountIds" as a dropdown menu.

Answer №1

To see the demonstration on jsfiddle, click the following link: http://jsfiddle.net/HB7LU/13213/.

In order to select the correct data within the accountIds, you must utilize dot notation.

Here is how it can be implemented in HTML:

<div ng-controller="MyCtrl">
    <select>
        <option ng-repeat="item in items.accountIds">{{item}}</option>
    </select>
</div>

And here is the corresponding JS/Angular code:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.items = {
        "id": 1,
        "firstName": "John1",
        "lastName": "Doe1",
        "accountIds": [12345, 12346, 12347],
        "recipients": [{
            "accountNumber": 22222,
            "firstName": "Mary1",
            "lastName": "Jane1"
        }, {
            "accountNumber": 33333,
            "firstName": "Mary2",
            "lastName": "Jane2"
        }]
    }
}

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

Combining and grouping objects by their IDs in a JavaScript array

Information: [ { "id": "ewq123", "name": "Joshua", "order": "Pizza" }, { "id": "ewq123", "name": "Joshua", "order": ...

Verify the validity of the barcode using the barcodescanner plugin in PhoneGap

After using the barcode scanner from https://github.com/wildabeast/BarcodeDemo to scan a barcode successfully, I now need to validate the barcode through JSON. Although I have attempted to implement this feature, it is not functioning as intended. How can ...

The utilization of realloc() on an array of structures results in an invalid size allocation

I've been working on this function that allocates memory for an array and then reallocates it when needed. The initial allocation with calloc works fine, but for some reason, the realloc is failing. struct database *parse() { int i = 0; int ...

send another response following the completion of the request.end()

I am facing challenges with writing the correct callback function. The situation involves a user making a request to "/city", which then triggers the server to make a request to a third-party service for data retrieval using http.request(). I successfully ...

What is the best way to calculate the total sum of grouped data using mongoose?

I have a collection of log data that I need to work with. [ { "logType":1, "created_at": 2015-12-15 07:38:54.766Z }, .. .. .., { "logType":2, "created_at": 2015-13-15 07:38:54.766Z } ] My task is to group the ...

Updating multiple documents in Mongoose that have a specific element in an array

I have structured a Mongoose schema like this: const mongoose = require('mongoose'); const ItemSchema = mongoose.Schema({ id: { type: String, required: true, }, items: { type: Array, required: true, }, date: { type: ...

The primary view seamlessly integrates with the page following the invocation of the partial view

Whenever the button is clicked, a different partial view is returned based on the selected value from the drop-down list. Controller: [HttpPost] public ActionResult Foo(SomeViewModel VM) { var model = VM; if (Request.IsAjaxRequest()) { ...

contrasts in regex special characters: .net versus javascript

Here is my current javascript implementation: EscapeForRegex = function(input) { var specials = ["[", "\\", "^", "$", ".", "|", "?", "*", "+", "(", ")", "{", "}"] for (var k in specials) { var special = specials[k]; ...

Javascript Macros for Mastering Excel

My goal is to use Javascript macros to handle excel spreadsheets instead of the standard VBA. I have found a way to run javascript code through VBA, as shown below: 'javascript to execute Dim b As String b = "function meaningOfLife(a,b) {return 42;}" ...

Creating custom annotations for specific fields in jsonschema2pojo

I've encountered a situation while using jsonschema2pojo where some fields require special serialization and deserialization. How can I configure this in the json schema? Here is my current schema: "collegeEducation": { "javaJsonView ...

The customTypeMapping for 'JSON' is currently experiencing issues with Apollo GraphQL on Android

My build.gradle file contains customTypeMapping['JSON'] = "kotlin.Any" Inside my graphql file, there is a mutation named UpdatePropertyInfo with variables: $id: ID $extra_beds: [JSON] { update_property_info( id: $id ...

Importing a 3D Model Using Three.js

I've been trying to import a 3D model by following tutorials. I managed to successfully import using A-Frame Tags, but encountering issues with Three.js. The code snippets are from a tutorial on YouTube that I referred to: https://www.youtube.com/watc ...

Try utilizing the Array.map method with a two-dimensional array

My current challenge involves a 2-dimensional Array where I am attempting to implement a "randomBool" function on each of the elements within it. The "randomBool" function essentially generates a random boolean value: const randomBool = () => Boolean( ...

Utilizing dropdown list values within the context of $.getJSON: A practical guide

This is the script that I have written. $.getJSON("Employee.js", function (data) { var sample = data.one;alert(sample) }); Below you can see the contents of the Employee.js file: var sample={ "one":"Manager","two":"Sr.Eng","three":"Eng" } I am ...

Can the conventional HTML context menu be swapped out for a link context menu instead?

Currently, I am working on developing a custom linkbox component that is similar to the one found on this page: Here is an example of the code: export const Linkbox = ({}) => { const linkRef = useRef(null); return ( // eslint-disable-next-l ...

Troubleshooting: Issues with the functionality of AngularJS Material dialogs

I am facing an issue with displaying an Array of items in a dialog. Despite not receiving any errors, the output is not as expected. $scope.showDialog = function (ev) { $mdDialog.alert({ controller: 'DialogController', ...

Selecting a specific section from a JSON data reception

Upon executing a POST request to , the resulting response typically looks like this: { "success": true, "data": { "url": "http://i.imgflip.com/1nciey.jpg", "page_url": "https://imgflip.com/i/1nciey" } } Is there a way for me to output the s ...

What steps do I need to take in order to obtain accurate results from this array

Recently, I encountered an issue while working with a custom post on WordPress. I attempted to retrieve my desired output as an array but unfortunately ended up with nothing. Below is the code snippet that caused the problem: $idx = 0; $wp_query = new ...

Importing JSON data into PostgreSQL with Python and Psycopg2

Struggling to get my query working with a JSON file containing over 80k lines of data. To troubleshoot, I reduced the file to just three lines: Import psycopg2 import io readTest1 = io.open("C:\Users\Samuel\Dropbox\Work\Python and ...

Run JavaScript on every website when the page loads

After loading all or specific pages in the browser, I am looking to run JavaScript code (predefined code). Are there any browsers and plugins/components that allow me to achieve this? The manual method involves opening the console (e.g. firebug) and execu ...