jquery getJSON 和 $.each 循环遍历未链接到父索引的子数组-6ren

jquery getJSON 和 $.each 循环遍历未链接到父索引的子数组

转载作者：行者123 更新时间：2023-12-01 00:15:01

25

4

我对 jQuery 和 JSON 非常陌生，对这个网站也是全新的。

我正在尝试使用 jQuery 显示 JSON 文件中的数据。

JSON 示例:

[
    {
        "show":"swim",
        "image": "Img1.jpg",
         "brands": 
                [
                {
                "brand":"Img 1 Company",
                "YAH": "Img 1 YAH"
                },
                {
                "brand":"Img 1 Company 2",
                "YAH": "Img 1 YAH 2"
                }
                ]
    },
    {
        "show":"swim",
        "image":"Img2.jpg",
        "brands": [
                {
                "brand":"Img 2 Company 1",
                "YAH": "Img 2 YAH 1"
                },
                {
                "brand":"Img 2 Company 2",
                "YAH": "Img 2 YAH 2"
                },
                {
                "brand":"Img 2 Company 3",
                "YAH": "Img 2 YAH 3"
                }
                ]
    },
    {
        "show":"resort",
        "image":"Img3.jpg",
        "brands": [
                {
                "brand":"Img 3 Company 1",
                "YAH": "Img 3 YAH 1"
                },
                {
                "brand":"Img 3 Company 2",
                "YAH": "Img 3 YAH 2"
                }
                ]
    }
]

我希望“品牌”数组数据仅与父对象一起显示。当我显示到 console.log 时，它是正确的，但是当我 .append 时，它会重复所有品牌数组数据。它正确显示“images”值，并显示“brands”数组中的所有数据，但重复“brands”数组数据。结果显示如下:

Img1.jpg

图片 1 公司
图片 1 公司 2
图片 2 公司 1
图片 2 公司 2
图片 2 公司 3
图片 3 公司 1
图片 3 公司 2

Img2.jpg

图片 1 公司 2
图片 2 公司 1
图片 2 公司 2
图片 2 公司 3
图片 3 公司 1
图片 3 公司 2

Img3.jpg

图片 3 公司 1
图片 3 公司 2

结果应该是:

Img1.jpg

图片 1 公司
图片 1 公司 2

Img2.jpg

图片 2 公司 1
图片 2 公司 2
图片 2 公司 3

Img3.jpg

图片 3 公司 1
图片 3 公司 2

我不知道如何使品牌数组仅显示父对象的数据。这是我的 HTML 和脚本

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset="utf-8" /><body>
<div id="ImageGallery"></div> 

<script>
$.getJSON('js/data.json', function(json) {
   $.each(json,function(i, value){
       $('#ImageGallery').append('<p>'+ value.image + '</p><ul class="brands"></ul>');
     $.each(value.brands, function(index, obj){
        $('ul.brands').append('<li>'+ obj.brand +'</li>');
     })
        });
});
</script>
</body>

谢谢!

最佳答案

引用您刚刚创建的 ul 并从 .each 回调中调用它。

$.each(json,function(i, value){
     $('#ImageGallery').append('<p>'+ value.image + '</p>');
     $ul = $('<ul class="brands"></ul>').appendTo('#ImageGallery');
     $.each(value.brands, function(index, obj){
        $ul.append('<li>'+ obj.brand +'</li>');
     })
});

关于jquery getJSON 和 $.each 循环遍历未链接到父索引的子数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14060271/

25

4

0

文章推荐： jquery - 在 jQuery 中拖动时，元素不能具有 z-index 最大值

文章推荐： Jquery - 通过缓动对背景位置进行动画处理

文章推荐： jquery - 使用 jquery masonry 在网格中间插入项目

文章推荐： jquery - DatePicker 与 glDatePicker。有两个输入的日期范围

javascript - getJSON 位于另一个 getJSON 中
我正在尝试获取客户端的 IP 地址和 GPS 坐标。使用 jQuery，我有这个: $.getJSON("http://jsonip.appspot.com/", function(data) {
javascript - 什么时候应该使用 $.getJSON.done() 而不是 $.getJSON()？
这个问题已经有答案了: Why does JQuery.getJSON() have a success and a done function? (2 个回答) 已关闭 6 年前。我想知道这两个代
javascript - jQuery 及其 .getJSON 不工作以及如何同步异步 .getJSON？
所以首先，是的，我知道有几个答案，但没有一个能够解决我的问题。首先我将展示我的代码HTML: Shop
javascript - 当调用 $.getJSON 的 $.getJSON 全部完成时如何收到通知
假设我有以下 JavaScript: (function($) { $.getJSON(url, function(data) { $.each(data.rows, function(i
javascript - jQuery:是否可以在另一个 getJSON 请求中使用 getJSON 请求？
是否可以使用 jQuery 在另一个 getJSON 请求中使用 getJSON 请求？像这样: // Population the Requests List // jQuery AJAX cal
javascript - 如何在循环期间访问 jquery getJson 调用($.getJson)中的索引变量？
我有以下代码，该代码已针对此问题进行了简化。基本上我有一个循环，在每次迭代中调用 jquery getJSON 函数，调用 API 端点来获取一些天气数据。问题是，当 getJSON 请求被触发时，我
javascript - 为什么 return 在 getJSON 中不起作用以及为什么我不能从 getJSON 写入变量？
我有一个使用 getJSON 的函数，但它没有像我预期的那样工作。 function balbla(name, param) { $.getJSON("/blabla.json?nam
jquery - 为什么即使 $.getJSON 运行正常，警报也没有运行？ (回调未执行，即使请求使用 getJSON 工作正常)
我有一段代码，例如: $.getJSON("http://mysite.org/polls/saveLanguageTest?url=" + escape(window.location.href)
jquery.getJSON() 错误处理
我正在使用jquery.getJSON() ，但我不知道如何进行错误处理。这些是我需要处理的一些情况。 1)如果返回的数据为null怎么办？ 2)如果返回的数据不能解析json怎么办？ 3) 如果返回
jquery - getJSON 回调未触发
我正在通过参与一个测试项目(包括 SubSonic 和 jQuery)来学习 asp.net mvc。我遇到的问题是，每次我想要返回的不仅仅是简单字符串(例如 Json 对象)时，我都会遇到困难，因
jquery - $.getJSON 获取状态
执行跨域查询，如果运行的URL不可用(404)，如何执行某个功能？我尝试这样的事情: $.getJSON({ url:'example.php?callback=?', statusCode: { 4
jQuery getJSON 调用未返回所需的参数？
我在 jQuery 中搜索了相关主题，但没有找到任何方法来解决我的问题。 $(document).ready(function(){ $("#inputForm").submit(functi
带有超时的 jQuery getJSON
当调用 yahoo Web 服务 (http://boss.yahooapis.com/ysearch) 返回数据集时，是否可以设置超时并在超时后退出例程？ jQuery.getJSON("http:
javascript - getJSON 超时处理
我正在使用 jQuery getJSON() 函数。这个函数获取数据没有问题。但有时等待，等待等待......我的加载栏在页面中心显示加载加载。所以 jQuery ajax() 函数有一个超时变量。
jQuery.getJSON 不触发回调
我有一个 html 代码: asd $('button').click( function() { $.getJSON('/schedule/test/', function
jquery - getJSON 同步
目标:我所追求的是每次在数据库中添加某些内容时(在 $.ajax 到 Submit_to_db.php 之后)，从数据库获取数据并刷新 main.php(通过 draw_polygon 更明显)。所
javascript - $getJson ..未调用操作方法
我已经阅读了文档并用谷歌搜索了此内容，但没有看到问题所在。我正在尝试从本地 json 文件获取一些数据。我已在 JSONLint 验证了响应数据代码 $(document).ready(functi
jquery - 从本地套接字jQuery getJSON
我在json.getJSON方法上遇到麻烦。这是我当前的代码: var jqxhr = $.getJSON("http://127.0.0.1:5002?callback=?", function()
javascript - getJSON 回调未执行
我需要进行跨域请求，并且 getJSON 有问题。 $.getJSON("http://usr:pwd@10.0.1.xx/cgi-bin/remote/request.cgi?m=json&r=gr
javascript - $.getJSON 返回值到变量
这个问题已经有答案了: How do I return the response from an asynchronous call? (42 个回答) 已关闭 8 年前。这是我的问题我有一个充满

首页

博学

6Ren·AI

商城

jquery getJSON 和 $.each 循环遍历未链接到父索引的子数组