Question

我必须构建这样的东西：

有两个JSON文件。一个用于left-col，另一个用于right-col

JSON代表left-col：http://maqe.github.io/json/posts.json

JSON代表right-col：http://maqe.github.io/json/authors.json

HTML结构是这样的：

<div class="list-container'>
   <!-- repeat div start -->
   <div class="row">
      <div class="col-sm-8">
      <!-- data from 1st JSON -->
      </div>

      <div class="col-sm-4">
      <!-- data from 2nd JSON -->
      </div>
   </div>
   <!-- repeat div end -->
</div>

.list-container内部的所有内容都会循环生成到JSON文件中，因此最终的HTML将是：

<div class="list-container'></div>

我能够从1st JSON文件的left-col (col-sm-8)创建动态内容：

       $.getJSON('http://maqe.github.io/json/posts.json', function(data) {
            var tmp = '';
            $.each(data, function(index, element) {

                tmp += '<div class="row">';
                tmp += '   <div class="col-sm-8">';
                tmp += '      <h3>' + element.title + '</h3>';
                tmp += '      <p>' + element.body + '</p>';
                tmp += '   </div>';
                tmp += '</div>';
            });
            $('.list-container').prepend(tmp);
        });

我还能够分别填充2nd JSON文件中的内容：

      $.getJSON('http://maqe.github.io/json/authors.json', function(data) {
            var tmp = '';
            $.each(data, function(index, element) {

                tmp += '<div class="row">';
                tmp += '   <div class="col-sm-4">';
                tmp += '      <p>'+element.name+'</p>';
                tmp += '      <p>'+element.role+'</p>';
                tmp += '   </div>';
                tmp += '</div>';
            });
            $('.list-container').prepend(tmp);
        });

但是，我不知道如何将这两个$.getJSON合并，因此一个合并在left-col (col-sm-8)内部，另一个合并在right-col (col-sm-4)内部。你能帮我吗？

Answer 1

正在2018-10-15 05:24:00.102 ERROR 7 --- [DefaultMessageListenerContainer-2] c.l.p.a.c.event.listener.MQListener : The ABC/CDE object received for the xyz event was not valid. e_id=11111111, s_id=111, e_name=ABC com.xyz.abc.pqr.exception.PNotVException: The r received from C was invalid/lacks mandatory fields. S_id: 123, P_Id: 123456789, R_Number: 12345678 at com.xyz.abc.pqr.mprofile.CPServiceImpl.lambda$bPByC$1(CPServiceImpl.java:240) at java.util.ArrayList.forEach(ArrayList.java:1249) rContainer.doInvokeListener(AbstractMessageListenerContainer.java:721) at org.springframework.jms.listener.AbstractMessageListenerContainer.invokeListener(AbstractMessageListenerContainer.java:681) at org.springframework.jms.listener.AbstractMessageListenerContainer.doExecuteListener(AbstractMessageListenerContainer.java:651) at java.lang.Thread.run(Thread.java:748) Caused by: java.lang.IllegalArgumentException: Invalid D because cm: null and pk: null were missing. at com.xyz.abc.pqr.mp.DD.resolveDetailsFromCDE(DD.java:151) at com.xyz.abc.pqr.mp.DD.<init>(DD.java:35) at java.util.ArrayList.forEach(ArrayList.java:1249) 2018-10-15 05:24:25.136 ERROR 7 --- [DefaultMessageListenerContainer-1] c.l.p.a.c.event.listener.MQListener : The ABC/CDE object received for the C1 event was not valid. entity_id=2222222, s_id=3333, event_name=CDE com.xyz.abc.pqr.PNotVException: The r received from C was invalid/lacks mandatory fields. S_id: 123, P_Id: 123456789, R_Number: 12345678 at com.xyz.abc.pqr.mp.CSImpl.lambda$buildABCByCo$1(CSImpl.java:240) at java.util.ArrayList.forEach(ArrayList.java:1249) at com.xyz.abc.pqr.event.handler.DHandler.handle(CDEEventHandler.java:45) at sun.reflect.GMA.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.springframework.aop.support.AopUtils.invokeJoinpointUsingReflection(AopUtils.java:333) at org.springframework.messaging.handler.invocation.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:197) at org.springframework.messaging.handler.invocation.InvocableHandlerMethod.invoke(InvocableHandlerMethod.java:115) at java.lang.Thread.run(Thread.java:748) Caused by: java.lang.NullPointerException: null中的每个循环上创建该行。您需要创建一行并将各列插入该行内。

$.each()

在第一个ajax请求成功之后发送第二个ajax请求。通过<div class="list-container"> <div class="row"> </div> </div>将第一个ajax的响应添加到html。

在第二个ajax请求上，获取每个列，即$('.row').append()，并使用col-sm-8在该列之后添加第二个ajax的响应。

请注意，我将类$('.content:eq(' + index + ')').after(tmp);添加到了.content

col-sm-8

这是jsfiddle：http://jsfiddle.net/xpvt214o/889516/

希望这会有所帮助。

如何使用jQuery从两个JSON创建动态内容

1 个答案: