Javascript 基于返回的json对象在数组中组合数组

我在这方面遇到了一些麻烦，希望我能得到一些帮助来解决问题。我有一个json文件，它返回3个对象，这些对象放在一个数组中。每个对象中还有另一个json调用，用于获取对象的更多信息。我希望返回内部json调用并将其合并到主对象中，以便可以从对象本身访问每个对象的数据

以下是我的json文件的结构：

{
  "Animals": {
    "title": "Animals",
    "id": 1,
    "info": {
      "link": "urlLinkHere"
    }
  },
  "Cars": {
    "title": "Cars",
    "id": 2,
    "info": {
      "link": "urlLinkHere"
    }
  },
  "Food": {
    "title": "Food",
    "id": 3,
    "info": {
      "link": "urlLinkHere"
    }
  }
}

每个链接都返回一组不同的数据，这些数据与另一个不相似

这就是我的json在发出内部get调用后将对象填充到主对象中的方式-更新：

在我的html中，这就是我所尝试的。更新：

在我的组件文件中：

getData(){
    this.dataService.getData()
      .flatMap(data => {
        this.results = data;
        for(let x of this.results){
          var link = x.info.link;

          this.observables.push(this.dataService.getDataQuery(link));}

        return Observable.forkJoin(this.observables);}
      ).subscribe(data => {
        this.subData = data;
      });

HTML:

从forloop获取画布数据集

因此，我尝试使用ng2图表添加画布，画布需要数据集和标签来绘制x轴和y轴，但我无法从forloop填充x轴和y轴

例如：

<div *ngSwitchCase="'Animals'">
      <div *ngFor="let item of result.details">
        <canvas [datasets]= "item.gender" [labels]="item.location" [chartType]="horizontalBar"></canvas>
      </div>
    </div>

---

在通过调用getDataQuery获取数据后，似乎要覆盖link属性以包含数组。像这样更新组件中的getData

getData() {
  this.dataService.getData()
    .subscribe(data => {
      this.results = data;
      for (let x of this.results) {
        var link = x.info.link;
        this.dataService.getDataQuery(link)
                        .subscribe(data => {
                           // Assumes the data returned by getDataQuery function is an array
                           // If it is wrapped in a json object, just retrieve it
                           // like x.info.link = data.fieldName; for example
                           x.info.link = data;
                        });
      }
    });
}

像这样更新你的模板

<div *ngFor="let result of results: let i = index">
    <div class="header"> {{result.title}}</div>
    <div class="bodyContent" *ngFor="let obj of result.info.link">
        <!-- to access the individual properties, just do obj.propertyName, etc -->
        {{ obj }} 
    </div>
</div>

---

很可能有一个更优雅的解决方案，我需要仔细阅读我的rxjs；但这是可行的：

使getData保持原样：

获取数据{ 返回此。\u http.get'url' .mapres:Response=>res.json .mapobj=>Object.keysobj.mapkey=>{return obj[key]} .catch this.handleError； } 然后您的组件订阅：

恩戈尼特{ this.dataService.getData .subscribedata=>{ 这个结果=数据； //迭代数组 this.results.forEachresult=>{ //基于链接执行第二个请求 this.dataService.getDataQueryresult.info.link .subscribedata=>{ //将结果推送到对象属性“详细信息”或您选择的名称 result.details=数据 } } } } 以及您的getDataQuery：

getDataQuerylink:任何{ 返回此。\u http.getlink .mapres:Response=>res.json .catch this.handleError； } 然后您可以在模板中使用[ngSwitch]：

{{result.title} {{item.gender}，{{item.location}

---

最后，为了简单起见，后面的程序返回相同的数据，因此，我只是硬编码，例如“Car data here”。

我会尝试一下，但我想知道我的html将如何更改？因此，如果我将内部json添加到主对象中，它不会是x.info，因为我没有x.data-除非我误解了什么。您可以添加到外部主对象或使用任何名称添加到info对象中want，我使用数据只是为了演示这一点，所以如果您想将这个内部对象添加到主对象的info对象，您可以使用mainObject.info.anyNameYouWant=data来代替那里的x.data。然后在您的模板中，执行result.info.ThenametatYou用于访问此数据当前当我呈现html时，我在我的div:[对象，对象]，[对象，对象]，[对象，对象]这是该div的正确对象数，但当我尝试将其放入*ngFor循环中以显示其中的单个内容时，我遇到以下控制台错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor只支持绑定到Iterables，比如数组。这是因为getDataQuery返回的数据是json对象，而不是数组，所以您可以在它上使用for循环。您没有得到数组吗？组合数据似乎是一个对象？如果你可以迭代，这是正确的吗？结果的实际内容是什么？@AJT_82因此结果包含外部对象（如动物、汽车、食物）的信息，但子数据包含在每个动物、汽车、食物中进行的每个调用的返回json。有没有一种方法可以返回子数据，使其成为一个数组，并且易于迭代以显示数据？好的，这样它们就不会像您呈现的大对象那样合并？我遵循下面Dummy给出的答案。是否有其他方法可以像我所展示的那样合并数据？是的！最后我成功了，非常感谢！我将继续执行我的所有部分，如果您不介意，如果我遇到问题，可以给您回复。很高兴听到它成功了：当然，如果您有问题，请点击我，我们将查看我是否可以提供帮助：我正在尝试添加条形图，并尝试从项目填充x轴和y轴，但它没有在画布中渲染，不知道您是否有想法。我用我文章底部画布的html更新了我的文章

<div *ngFor="let result of results: let i = index">
    <div class="header"> {{result.title}}</div>
    <div class="bodyContent" *ngFor="let item of subData; let i=index;">
        Here i would like to have the returned data from the inner json call. 
    </div>
</div>

[
        {
          "id": "1",
          "gender": "Male",
          "dob": "2014-05-03T14:48:34-08:00",
          "location": "New York",
          "about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "id": "2",
          "gender": "Male",
          "dob": "2014-05-03T14:48:34-08:00",
          "location": "North Carolina",
          "about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "id": "3",
          "gender": "Female.",
          "dob": "2014-05-03T14:48:34-08:00",
          "location": "Texas",
          "about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }
      ]

<div *ngSwitchCase="'Animals'">
      <div *ngFor="let item of result.details">
        <canvas [datasets]= "item.gender" [labels]="item.location" [chartType]="horizontalBar"></canvas>
      </div>
    </div>

getData() {
  this.dataService.getData()
    .subscribe(data => {
      this.results = data;
      for (let x of this.results) {
        var link = x.info.link;
        this.dataService.getDataQuery(link)
                        .subscribe(data => {
                           // Assumes the data returned by getDataQuery function is an array
                           // If it is wrapped in a json object, just retrieve it
                           // like x.info.link = data.fieldName; for example
                           x.info.link = data;
                        });
      }
    });
}

<div *ngFor="let result of results: let i = index">
    <div class="header"> {{result.title}}</div>
    <div class="bodyContent" *ngFor="let obj of result.info.link">
        <!-- to access the individual properties, just do obj.propertyName, etc -->
        {{ obj }} 
    </div>
</div>