javascript - 如何在多个div中显示json数据集

Question

我有一个场景，我必须在多个 div 中显示 json 数据。我不知道该怎么做。到目前为止，我已经能够获取 json 数据并将其打印在控制台中。

假设我有六个 div，每个 div 都有以下字段:

        DIV 1
  ----------------
 | JName:    value1 |
 | JobSkill: value2 |
 | Descrip : value3 |
 | Salary:   value4 |
 | Experien: value5 |
  ----------------

        DIV 2
  ----------------
 | JName:    value1 |
 | JobSkill: value2 |
 | Descrip : value3 |
 | Salary:   value4 |
 | Experien: value5 |
  ----------------

我想将每个 json 数据集值映射到每个 div1、div2..etc

我有这样的 json:

{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}

所以第一行或一组 json 应映射到 div1，然后第二行映射到 div2 等。我该怎么做？

如果我 ng-repeat 那么它会打印一个 div 中的所有内容。

具有六个 div 的 Html:

<div class="col-lg-8 col-md-6 col-sm-12">
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;" ng-controller="jobSummaryController">
        <ul>
            <li ng-repeat="x in token">
                {{ x.jobName }}
            </li>
        </ul>
    </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
    <div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
</div>

Angular Controller :

myApp.controller('jobSummaryController', function ($scope, $http) {

    var url = 'rs/FetchJobSummary';
    $http.get(url).success(function (response)
    {
        $scope.token = response;

        console.log("job is:" + JSON.stringify(response));
    }).error(function (response)
    {
        console.log("error", response);
    });
});

Answer 1

您使用 ng-repeat 的元素将重复数组/对象中的项目次数。 因此，如果您想要 6 个 div，您可以在要重复的 div 元素上使用 ng-repeat:

<div ng-repeat="x in token" class="job_box col-lg-offset-0" style="float: left; margin: 2px;">
  <ul>
    <li ng-bind="x.jobName">
    </li>
    <li ng-bind="x.jobPrimarySkill">
    </li>
    <!--...-->
  <ul>
</div>