如何在 Dart 中循环/映射 json 对象

Question

I have json object like this:

apus_findgo_gallery_images: {
2092: "http://www.camhalalguide.com/wp-content/uploads/2019/11/6b806c88-2f19-4054-914b-dee3c0c091eb.jpg",
2093: "http://www.camhalalguide.com/wp-content/uploads/2019/11/24.1.1-phnom-chisor-temple.jpg",
2096: "http://www.camhalalguide.com/wp-content/uploads/2019/11/image-asset.jpg",
2098: "http://www.camhalalguide.com/wp-content/uploads/2019/11/phnom-chisor-01-600_orig.jpg",
2099: "http://www.camhalalguide.com/wp-content/uploads/2019/11/phnom-chisor-02-600_orig.jpg"
},

How to get property value as array like this:

[
"http://www.camhalalguide.com/wp-content/uploads/2019/11/6b806c88-2f19-4054-914b-dee3c0c091eb.jpg",
"http://www.camhalalguide.com/wp-content/uploads/2019/11/image-asset.jpg",
"http://www.camhalalguide.com/wp-content/uploads/2019/11/phnom-chisor-01-600_orig.jpg",
"http://www.camhalalguide.com/wp-content/uploads/2019/11/phnom-chisor-02-600_orig.jpg"
]

Answer 1

Use jsonDecode function

https://api.flutter.dev/flutter/dart-convert/jsonDecode.html

final List<String> images = (jsonDecode(imagesJson) as List<dynamic>).cast<String>();

Answer 2

as you have given the JSON I have made an example and loaded your JSON locally : This is your JSON below:

{
    "apus_findgo_gallery_images": {
        "2092": "http://www.camhalalguide.com/wp-content/uploads/2019/11/6b806c88-2f19-4054-914b-dee3c0c091eb.jpg",
        "2093": "http://www.camhalalguide.com/wp-content/uploads/2019/11/24.1.1-phnom-chisor-temple.jpg",
        "2096": "http://www.camhalalguide.com/wp-content/uploads/2019/11/image-asset.jpg",
        "2098": "http://www.camhalalguide.com/wp-content/uploads/2019/11/phnom-chisor-01-600_orig.jpg",
        "2099": "http://www.camhalalguide.com/wp-content/uploads/2019/11/phnom-chisor-02-600_orig.jpg"
    }
}

This is the model class I have created:

// To parse this JSON data, do
//
//     final yourModelClass = yourModelClassFromJson(jsonString);

import 'dart:convert';

YourModelClass yourModelClassFromJson(String str) => YourModelClass.fromJson(json.decode(str));

String yourModelClassToJson(YourModelClass data) => json.encode(data.toJson());

class YourModelClass {
    Map<String, String> apusFindgoGalleryImages;

    YourModelClass({
        this.apusFindgoGalleryImages,
    });

    factory YourModelClass.fromJson(Map<String, dynamic> json) => YourModelClass(
        apusFindgoGalleryImages: Map.from(json["apus_findgo_gallery_images"]).map((k, v) => MapEntry<String, String>(k, v)),
    );

    Map<String, dynamic> toJson() => {
        "apus_findgo_gallery_images": Map.from(apusFindgoGalleryImages).map((k, v) => MapEntry<String, dynamic>(k, v)),
    };
}

This is the main file you get the list of images:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_project_for_api/model.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    yourMethod();
  }

  yourMethod() async {
    String jsonString = await loadFromAssets();
    final yourModelClass = yourModelClassFromJson(jsonString);

    Map data = yourModelClass.apusFindgoGalleryImages;
    var list = new List();

    data.forEach((key, value) {
      list.add(value);
    });
    for (int i = 0; i < list.length; i++) {
      print(list);
      print('\n');
    }
  }

  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(child: Text('Hello')),
      ),
    );
  }
}

let me know if it works.