Why my data from MySql Database are not showing in the application?

Question

Created an API using PHP for fetching the data from MySql database but my data isn't showing in my flutter app. I created the model class for the JSON file and called the file. I need to show the data in my app the page Homescreen.dart but the data are not fetching.

this is my JSON file

[
    {
        "Id": "1",
        "Name": "Cafe La Vista",
        "Address": "Zindabazar",
        "Longitude": "91.878357",
        "Latitude": "24.896719"
    },
    {
        "Id": "2",
        "Name": "Peepers",
        "Address": "Zindabazar",
        "Longitude": "91.871094",
        "Latitude": "24.895376"
    }
]

This is my model class for fetching data from mysql

import 'dart:convert';

List<restaurant_list> restaurantsFromJson(String str) =>
    List<restaurant_list>.from(
        json.decode(str).map((x) => restaurant_list.fromJson(x)));

String restaurantsToJson(List<restaurant_list> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class restaurant_list {
  restaurant_list({
    this.id,
    this.name,
    this.address,
    this.longitude,
    this.latitude,
  });

  String id;
  String name;
  String address;
  String longitude;
  String latitude;

  factory restaurant_list.fromJson(Map<String, dynamic> json) =>
      restaurant_list(
        id: json["Id"],
        name: json["Name"],
        address: json["Address"],
        longitude: json["Longitude"],
        latitude: json["Latitude"],
      );

  Map<String, dynamic> toJson() => {
        "Id": id,
        "Name": name,
        "Address": address,
        "Longitude": longitude,
        "Latitude": latitude,
      };
}

In this class called the API

import 'restaurant_list.dart';
import 'package:http/http.dart' as http;

Future<List<restaurant_list>> fetchRestaurants() async {
  String url = "https://sylrest.000webhostapp.com/conn.php";
  final response = await http.get(url);
  return restaurantsFromJson(response.body);
}

The HomePage where the data should be shown

import 'package:flutter/material.dart';
import 'restaurant_list.dart';
import 'restaurant_list_api.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => new _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('HomeScreen'),
        ),
        body: Container(
            child: FutureBuilder(
          future: fetchRestaurants(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, index) {
                    restaurant_list restaurant = snapshot.data[index];
                    return Text('${restaurant.name}');
                  });
            }
            return CircularProgressIndicator();
          },
        )));
  }
}

Solution

You need to decode the json data you are fitching. I have added some code here :

Future<List<restaurant_list>> fetchRestaurants() async {
  String url = "https://sylrest.000webhostapp.com/conn.php";
  final response = await http.get(url);
  return json.decode(response.body);
}

Comments

[Krish Bhanushali]

can you print the response? like is it showing there?

[avishak chakroborty]

the response is just showing the Circular progress indicator. That means my data are not in the snapshot.

[avishak chakroborty]

these are the when I printed snapshot error. I/flutter (13344): null I/flutter (13344): Error on line 1, column 5: Invalid media type: expected "/". I/flutter (13344): ╷ I/flutter (13344): 1 │ JSON I/flutter (13344): │ ^ I/flutter (13344): ╵