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

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获得的响应类型：

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',
  }
}

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

let myData = [];
for(let index in data) {
  myData.push(data[index]);
}

更新此数据看起来很眼熟。你在使用JSONPlaceholder吗？如果是这样的话，你可以看看我创建的这个Sample StackBlitz Project。我还使用JSONPlaceholder应用程序接口来获取用户列表，并将其显示在角度材料表中。此示例将帮助您了解如何从API获取响应。