How to find index of Json nested array in jquery?

Question

I'm creating an image uploader using Codeigniter3 and jQuery / Ajax.

Issue: I don't understand how to find the index of the array that I get from the ajax response as below result.

Here is the result when images upload

{
    "res": true,
    "img_pro": {
        "upload": {
            "file_name": "web_page-_500_x_420px-06s1.png",
            "file_type": "image\/png",
            "file_path": "/uploads\/",
            "full_path": "/uploads\/web_page-_500_x_420px-06s1.png",
            "raw_name": "web_page-_500_x_420px-06s1",
            "orig_name": "web_page-_500_x_420px-06s.png",
            "client_name": "web_page-_500_x_420px-06s.png",
            "file_ext": ".png",
            "file_size": 233.79,
            "is_image": true,
            "image_width": 563,
            "image_height": 420,
            "image_type": "png",
            "image_size_str": "width=\"563\" height=\"420\""
        }
    },
    "token": "e291d9b7176d23647470083f7ccfd166"
}

And I used $.ajax for sending images to the server

<script>
    $(document).ready(function () {
        $("#submit").on('click', function () {

            $.ajax({
                url: 'http://localhost/cootel/gotoadmin/image/upload',
                type: 'POST',
                data: new FormData($('#img_upload')[0]),
                contentType: false,
                cache: false,
                dataType: 'json',
                processData: false,
                success: function (data) {
                    var items = [];
                    $.each(data, function (key, val) {
                        console.log(val.upload['file_name']);
                if(val.upload.file_size ===2M){
                 alert("your file is 2M");
                  }
                    });
                }
            });

        });
    });
</script>

Thanks for help

Well - first problem I see is there is actually no array in the result. Check out this jsonmate.com permalink of your result - jsonmate.com/permalink/55af2de7aa522bae3683f13a . It's color-coded and you only have a nested object. You can get a value in code like data.img_pro.upload.file_name based on the hierarchy you see in that permalink I provided. — ThisClark
– ThisClark, Commented Jul 22, 2015 at 5:50
What do mean with index? The result is an object with sub-objects. Not an array. Do you mean the property-describer? — cluster1
– cluster1, Commented Jul 22, 2015 at 5:56
@michael.zech: The "property-describer" is commonly called the "key" — Cerbrus
– Cerbrus, Commented Jul 22, 2015 at 5:56
@ThisClark Thanks you very much it is working now.and I have to remember data array and Json thanks too much — DMS-KH
– DMS-KH, Commented Jul 22, 2015 at 6:07
@ThisClark If I got this Json data How can I using Children and Id? [{"id":1,"children":[{"id":1,"children":[{"id":325},{"id":325},{"id":325},{"id":325}]},{"id":1,"children":[{"id":326},{"id":326}]},{"id":1,"children":[]},{"id":1,"children":[]},{"id":1,"children":[]},{"id":1,"children":[{"id":330}]},{"id":1,"children":[]}]},{"id":332,"children":[]} — DMS-KH
– DMS-KH, Commented Jul 22, 2015 at 6:20

gor181 · Accepted Answer · 2015-07-22 06:41:22Z

2

Just use the old fashioned way..

success: function (data) {    
    var image;
    if(!data.img_pro || !data.img_pro.upload) {
        return;
    }
    image = data.img_pro.upload;

    if(image.file_size > 2M) {
        //Do something..
        return;
    }

    ..other checks..
}

answered Jul 22, 2015 at 6:41

gor181

2,0682 gold badges15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cluster1 · Accepted Answer · 2015-07-22 06:05:05Z

0

Use the "key" parameter which you assigned to the function (together with the "val" parameter): $.each(data, function (key, val) {

answered Jul 22, 2015 at 6:05

cluster1

6,1287 gold badges40 silver badges61 bronze badges

Comments

Cerbrus · Accepted Answer · 2015-07-22 05:53:53Z

-1

jQuery has the $.inArray() method, which is similar to indexOf() method of JavaScript. Basically, it returns -1 when it didn't find any index.

For example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.inArray demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"Karl" not found, so <span></span></div>
<div>"Pete" is in the array, but not at or after index 2, so <span></span></div>

<script>
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
</script>

</body>
</html>

(Source)

This example is from the jquery api website.

edited Jul 22, 2015 at 5:53

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

answered Jul 22, 2015 at 5:48

Barr J

11k2 gold badges31 silver badges49 bronze badges

1 Comment

A.T. Over a year ago

please don't copy paste another site content. you can provide link to that site..please take a tour of Stackoverflow usage.

Collectives™ on Stack Overflow

How to find index of Json nested array in jquery?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related