Having trouble loading the JSON data for display

My select dropdown is supposed to display the names of states. The data is being fetched from PHP and is also available in the controller JS file. However, the data is showing up as blank in the HTML. When I use console.log(), the fetched result from PHP shows the names of all the states in a table.

HTML:

  <select class='form-control' name='state' id='state' ng-model='AddqueryArr.state' required='required'  ng-change='getCity(AddqueryArr.state)'>
                    <option></option>
                    <option ng-repeat='state in State.json' value='{{state.id}}'>{{state.name}}</option>
                </select>

JS:

servicePOST.send(appConstants.BASE_MS_URL + 'Activity/fetch-addquery.php?case=State').then(function(result) {
            $scope.State=result;
            console.log($scope.State);

        }); 

PHP:

 case "State":
$sql="select stateid,statename from state ";

    $result = mysql_query($sql) or die(mysql_error());
    $json_array=$obj->runQuery($result);

break;

Sample Output:

Console.log:

https://i.sstatic.net/CAOhL.jpg

Answer №1

Your Response Object should include statename and stateid, not name and id.
Revise your HTML as below:

<select class='form-control' name='state' id='state' ng-model='AddqueryArr.state' required='required'  ng-change='getCity(AddqueryArr.state)'>
    <option></option>
    <option ng-repeat='state in State.json' value='{{state.stateid}}'>{{state.statename}}</option>
</select>

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

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons. The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. ...

What methods can I employ with JavaScript to catalog data collected from an HTML form?

Currently, my form requires users to input a username that cannot start or end with a period (.). I have implemented some code but I believe there is an issue with the .value[0] parts. //Checking Username if (document.getElementById("uName&quo ...

Acquire a portion of a string with JavaScript or jQuery

Given the string testserver\sho007, how can I utilize jQuery to extract only the value sho007? ...

Hiding a div using swipe gestures in Angular

What am I trying to achieve? I aim to hide a div when swiped right. This specific action will close the pop-up that appears after clicking a button. What tools are at my disposal? I am utilizing Ionic framework for this task. Within my app.js, I have i ...

Failure to display updated property value

After rendering an array of objects, I am attempting to add a new property using a function. However, the new property value is not displaying on the page even though it is present when I log the object in the console. The new property that I want to add ...

Working with ReactJs: Passing Parameters to Second Function

Currently, I am utilizing React-Bootstrap and looking to implement tooltips without creating multiple functions. Instead, I am using the second parameter to change the text of tooltips. However, I am encountering an issue where the function is interpreting ...

How can I adjust the position of a target point in the chase camera using THREE.js?

Recently, I've delved into the world of THREE.js and decided to create a game featuring a spaceship as the main element. Utilizing a chase camera for my model, I encountered a challenge where I needed to adjust the camera's position in relation t ...

Exploring THREE.Points, navigating through JSON data, and looping through different materials

After exporting some JSON data from Blender using three.js' addon, I am trying to extract colors from the materials associated with the geometry and convert them to "point" material types. Even though my console logs display that my .forEach function ...

Achieving responsive masonry layout with Bootstrap 4

I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects. While the page works well when resizing the browser window, it doesn&ap ...

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...

What causes all the accordion panels to toggle simultaneously in a ReactJs application?

When I click on the + button in my accordion, all the sections open at once. What could be causing this issue? Here is my code: const questions = [ { id:1, question: 'What is React?', answer: 'React is a JavaS ...

Node.js backend includes cookies in network response header that are not visible in the application's storage cookies tab

I am currently working on creating a simple cookie using express's res.cookie() function. However, I am facing an issue where the cookies are not being set correctly in the application tab. My project setup includes a React frontend and a Node backend ...

Animating progress bars using React Native

I've been working on implementing a progress bar for my react-native project that can be used in multiple instances. Here's the code I currently have: The progress bar tsx: import React, { useEffect } from 'react' import { Animated, St ...

Deciding between Bull queue and Database Triggers

My current project requires creating records in the database for users on a recurring basis, such as every Monday weekly or biweekly. I have identified two potential solutions to achieve this goal. One option is to utilize Database Triggers to generate ...

The message "Temporary headers are displayed" appears in Chrome

After creating an API to remove images from a MongoDB database using GridFS, I encountered an issue when calling the API. The image is successfully removed, but it causes the server to stop with an error that only occurs in Chrome, displaying "Provisional ...

Sidebar-driven top navigation menu

I am currently developing a Single Page Application using VueJS along with vuerouter. In my App.vue file, the structure is as follows: <template> <div id="app"> <header><topbar></topbar></header> <div cl ...

What is causing Puppeteer to not wait?

It's my understanding that in the code await Promise.all(...), the sequence of events should be: First console.log is printed 9-second delay occurs Last console.log is printed How can I adjust the timing of the 3rd print statement to be displayed af ...

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

Currently, I am utilizing the MUI autocomplete feature in conjunction with react-hook-form. I have meticulously followed the guidance provided in this insightful response. ControlledAutoComplete.jsx import { Autocomplete, TextField } from "@mui/mater ...

Using Javascript's document.write function to modify the content of a PHP page

Here is a Javascript function that capitalizes the first letter of a string: function capitalizeFL(string) { return string.charAt(0).toUpperCase() + string.slice(1); } In a file named statuswindow.php, there are PHP scripts that use this function to ...

What could be causing the "ERROR TypeError: Cannot read property 'length' of undefined" message to occur with a defined array in my code?

Even though I defined and initialized my array twice, I am encountering a runtime error: "ERROR TypeError: Cannot read property 'length' of undefined." I have double-checked the definition of the array in my code, but Angular seems to be playing ...