Question

我想在categories和home page menuItems中显示details page。到目前为止，我已经显示了categories，在我的家里，我只能单独解析类别，如何解析我的ts中的类别和menuitem，以及如何在详细信息页面中单独获取menuItems，我想将categories和menuItems与字段id匹配。

我的data.json

{
  “categories”: [
    {
      “id”: “101flashlight”,
      “desc”: “Crackerswithmultiplesounds”,
      “thumb”: “infw/thumb/flash.svg”,
      “title”: “FlashLightCrackers”
    },
    {
      “id”: “102zamin”,
      “desc”: “Crackerswithsparks”,
      “thumb”: “infw/thumb/zamin.svg”,
      “title”: “ZaminChakkars”
    }
  ],
  “menuItems”: [
    {
      “name”: “1001party”,
      “body”: “infw/detail/confetti/party”,
      “id”: “102zamin”,
      “code”: “”,
      “content”: “2Piecesperbox”,
      “desc”: “Crackerswithmultiplesounds”,
      “packing”: “30Boxespercase”,
      “size”: “16x22x8cm”,
      “tags”: “Confetti”,
      “thumb”: “infw/thumb/partycannon.png”,
      “title”: “PartyCannon”,
      “video”: “infw/videos/coming_soon.webm”
    },
    {
      “name”: “1002dollar”,
      “body”: “infw/detail/confetti/dollar”,
      “id”: “102zamin”,
      “code”: “”,
      “content”: “2Piecesperbox”,
      “desc”: “Crackerswithmultiplesounds”,
      “packing”: “30Boxespercase”,
      “size”: “52x12x5cm”,
      “tags”: “Confetti”,
      “thumb”: “infw/thumb/dollar.png”,
      “title”: “Dollar”,
      “video”: “infw/videos/coming_soon.webm”
    },
    {
      “name”: “1014elephantspl”,
      “body”: “infw/detail/flash/4splelephant”,
      “id”: “101flashlight”,
      “code”: “”,
      “content”: “5Piecesperpacket”,
      “desc”: “Crackerswithmultiplesounds”,
      “packing”: “500Packetspercase”,
      “size”: “16x22x8cm”,
      “tags”: “FlashLightCrackers”,
      “thumb”: “infw/thumb/4splelephant.png”,
      “title”: “4’ElephantSpecialCrackers”,
      “video”: “infw/videos/coming_soon.webm”
    },
    {
      “name”: “1024deluxelak”,
      “body”: “infw/detail/flash/4deluxelak”,
      “id”: “101flashlight”,
      “code”: “”,
      “content”: “5Piecesperpacket”,
      “desc”: “Crackerswithmultiplesounds”,
      “packing”: “300Packetspercase”,
      “size”: “16x22x8cm”,
      “tags”: “FlashLightCrackers”,
      “thumb”: “infw/thumb/4deluxelak.png”,
      “title”: “4’DeluxeLakshmiCrackers”,
      “video”: “infw/videos/coming_soon.webm”
    },
    {
      “name”: “1034deluxeele”,
      “body”: “infw/detail/flash/4deluxeele”,
      “id”: “101flashlight”,
      “code”: “”,
      “content”: “5Piecesperpacket”,
      “desc”: “Crackerswithmultiplesounds”,
      “packing”: “300Packetspercase”,
      “size”: “16x22x8cm”,
      “tags”: “FlashLightCrackers”,
      “thumb”: “infw/thumb/4deluxeele.png”,
      “title”: “4’DeluxeElephantCrackers”,
      “video”: “videos/coming_soon.webm”
    }
  ]
}

home.ts

export class HomePage {
  newsData: any;


  constructor(public navCtrl: NavController, private httpProvider:HttpProvider, ) {

this.getdata();
  }
    getdata(){

      this.httpProvider.getJsonData().subscribe(
        result => {
          this.newsData=result.categories;

          console.log("Success : "+this.newsData);
        },
        err =>{
          console.error("Error : "+err);
        } ,
        () => {
          console.log('getData completed');
        }
      );
    }
    itemClicked(item) {
      this.navCtrl.push(DetailsBasic, {
        item: item
      });
    }
  }

我试过this.newsData=result.categories.menuItems ..没有运气

我确定这可能是一个简单的问题，但我对此很新，并且无法找到如何做到这一点。

谢谢！

Answer 1

menuItems不是类别的属性。试试下面的一个。

this.newsData=result.menuItems

Answer 2

您可以修改数据，因为您在获取数据后会转换数据，使属于每个类别的菜单项放在每个相应的类别下。此解决方案不会这样做，但我们会过滤属于所选类别的菜单项。因此，在您的主页上重复您的类别，获得现有的点击事件，我们将过滤属于该类别的菜单项，并将这些菜单项传递到您的详细信息页面：

itemClicked(item) {
  // filter the menu items based on category
  let menuItems = this.newsData.menuItems.filter(x => x.id === item.id);
  this.navCtrl.push(DetailsBasic, {
    items: menuItems
  });
}

然后在您的详细信息页面中捕获数组参数并将其迭代到您的模板。

如何在本地json文件中获取两个不同的数组值

2 个答案:

StackBlitz