如何从json对象访问和使用多个数据？ 我需要做一个数组吗？

Question

I am a beginner and using $.get to retrieve data from a rest API such as:

 [{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"},
  {"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"}
  {"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}] }


$.get('http://xxxxxxxxxxx,
      function (data) {
      var obj = $.parseJSON(data);

So from what I understand I have retrieved the data from the REST API and parsed it so it is stored in a variable called obj.

My question is, how do I access and use each unique record in the obj variable?

Each record has it's own picture (item1.jpg, item2.jpg etc). Whem my app loads I want it to show the item1.jpg image, and I want to be able to navigate to the other item pictures using buttons (previous / next). I also want the description and price to be displayed underneath in some text input fields.

What I have figured so far is that I should:

1. Iterate through the obj variable, and store each record into an array.
2. Upon app initialisation I can set the default value for the image placeholder to array[index0].url, and set the description and price fields.
3. I can then set the previous and next buttons to array[currentIndex-1] or array[currentIndex+1].

Would this be the best way to do it?

Or can I just do this without using an array and manipulate the obj.data directly?

Thanks!!!

Answer 1

I may not be understanding what exactly what you want to do but I think I have the gist. If you just want to show the picture then the array of just images probably wouldn't be a bad idea. However, it looks like the Jason you're getting is already in an array. You can just use array index notation to get to what you want.

ie)

var arr = //your json response ;
var current = 0; //sets currently displayed object to the first in the array
var setCurrent = function () {
  var image = arr[current]["url"];
}

You can then modify current however you want (on click on arrow iterate up/down, etc) then call the setCurrent function to set your image the the one you want. Hope that helps!

Answer 2

You can use the response you have from $.get() directly.
It is an array of objects.

You can use it like this:

console.log(data[2].description);
// outputs: "Console"

I've made a CodePen demo where it has a 4th object with a real image url to show you how to use the url info...

---

EDIT

Just in case you wouldn't know this:

You can use the response inside the scope of the $.get() callback...
You can not use it straith after the $.get() outside the callback since $.get() is asynchronous.

You can use it in some other handler wich will happen after the response is received.

 var getResponse; $.get('http://xxxxxxxxxxx', function (data) { getResponse = data; console.log(data[2].description); // outputs: "Console" console.log(getResponse[2].description); // outputs: "Console" }); console.log(getResponse[2].description); // outputs: "Undefined" // But since this handler will be triggered long after the response is obtained: $("#somebutton").click(function(){ console.log(getResponse[2].description); // outputs: "console" }); 

Answer 3

In order for your page javascript to be able to access the data retrieved from your ajax request, you'll need to assign it to some variable which exists outside the callback function.

You will need to wait until the ajax request has been processed before you can read the array. So you might want to set the actual default image to be something that doesn't rely on the ajax request (a local image).

Here's a simple approach

 // fake testing ajax func function fakeget (url, callback) { setTimeout(callback(JSON.stringify([ {"id":"1","url":"http:\\/\\/123.456.78.910\\/workforce\\/images\\/item1.jpg","price":"99","description":"Mobile Phone"}, {"id":"2","url":"http:\\/\\/123.456.78.910\\/workforce\\/images\\/item2.jpg","price":"98","description":"Laptop"}, {"id":"3","url":"http:\\/\\/123.456.78.910\\/workforce\\/images\\/item3.jpg","price":"92","description":"Console"} ])), 1000); } // real code starts here // global variables for ajax callback and setImg func to update var imageData, currentImg; // change this back to $.get for real fakeget('http://xxxxxxxxxxx', function (data) { imageData = $.parseJSON(data); setImg(0); } ); function setImg(index) { // turns negative indices into expected "wraparound" index currentImg = (index % imageData.length + imageData.length) % imageData.length; var r = imageData[currentImg]; $("#theImg").attr('src', r.url); $('#theDescription').text(r.price + " " + r.description); } $("#prev").click(function () { setImg(currentImg - 1); }); $("#next").click(function () { setImg(currentImg + 1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img id='theImg' src='somedefault.jpg'> <div id='theDescription'></div> </div> <button id='prev'>Prev</button> <button id='next'>Next</button> 

Answer 4

Few observations :

• Your JSON Object is not a valid JSON .
• No need to parse it again your data is already a JSON Object .

Working fiddle

 var data = [{"id":"1","url":"http:\\/\\/123.456.78.910\\/workforce\\/images\\/item1.jpg","price":"99","description":"Mobile Phone"},{"id":"2","url":"http:\\/\\/123.456.78.910\\/workforce\\/images\\/item2.jpg","price":"98","description":"Laptop"}, {"id":"3","url":"http:\\/\\/123.456.78.910\\/workforce\\/images\\/item3.jpg","price":"92","description":"Console"}]; for (var i in data) { var imgUrl = data[i].url; console.log(imgUrl); }