Question

我正在使用ng2-smart-table并尝试显示数据

当我创建对象的本地数组时：

var data = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
  }
]

它可以工作，但是当我从我的API收到json结果时，它不起作用：

data = [
  0:{
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
  },
  1:{
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
  },
  2:{
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
  }
]

有什么想法吗？

Answer 1

您在问题中分享的两种结构都完全不同。理想情况下，如果您的API具有相同的响应结构，那会更好。我认为第一个是您的API响应的结构。我不太确定您如何获得以下结构。无论如何，它不是有效的数组。

如果仍然收到此响应，则可以创建一个映射函数以使其起作用。方法如下：

假设这是您从API中获得的响应：

package com.example.arlet.storemaps;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

import java.util.Timer;
import java.util.TimerTask;

public class SplashScreenActivity extends AppCompatActivity {
//duration of splash screen in miliseconds
long delay = 6000;
private Timer timer;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    this.supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

    setContentView(R.layout.activity_splash_screen);

    Timer RunSplash = new Timer();

    TimerTask ShowSplash = new TimerTask() {
        @Override
        public void run() {
            //finishing splash screen
            finish();

            //starting main activity
            Intent intent = new Intent(SplashScreenActivity.this, MainActivity.class);
            startActivity(intent);
        }
    };
    RunSplash.schedule(ShowSplash, delay);
}

@Override
protected void onDestroy(){
    timer.cancel();
    timer.purge();
    super.onDestroy();
}
}

您可以将其转换为所需格式的数据，如下所示：

data = {
  '0': {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
  },
  '1': {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
  },
  '2': {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
  }
}

更新这个数据看起来很熟悉。您正在使用JSONPlaceholder吗？如果是这样，您可以看一下我创建的Sample StackBlitz Project。我还使用JSONPlaceholder API获取用户列表，并将其显示在Angular Material Table上。此示例应帮助您了解如何从API获取响应。

正确反序列化json数组以在ng2-smart-table中显示结果

1 个答案: