Accessing JSON elements of an array of JSON objects

Question

I am returning a List of JSON items back from the front end. It current looks like:

[
  "[{ "_id" : ObjectId("5cbcd80e0c5c9f1dfc8bf2f3"), "price" : "$1,
  399.00", "name" : "AlienwareGamingPCDesktopAuroraR7-8thGenIntelCorei7-8700,
  16GBDDR4Memory,
  2TBHardDrive+32GBIntelOptane,
  ?NVIDIAGeForceGTX10808GBGDDR5X,
  Windows1064bit\", "url" : "https: //www.amazon.com/gp/product/B076BHG74V/ref=s9_acsd_zwish_hd_bw_b2N0U_>c_x_w?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=merchandised-search-11&pf_rd_r=TW0CMS0QN07XT2BM838T&pf_rd_t=101&pf_rd_p=62f4ca32-9706-51c1-a1d1-9f7214564c34&pf_rd_i=565098\", "description" : "ThenewAlienwareAuroraisamid-towerdesktopwithaMicroATXmotherboardandisalsooursmallestdual-graphicscapabledesktopandhasmoretool-lessfeaturesthananypreviousAlienwaredesktopsuchas: tool-lessgraphics,
  expansioncards,
  hard>drives,
  andmemory.", "keywords" : ["computer"] }]"
]

When displaying the results with: console.log(results[0]), it displays the whole object. When doing console.log(results[0].name) or console.log(results[0].name) I get a undefined error. There is current only one object in the list, but for future queries there will be more. Any ideas on how to access individual elements?

What the code in the frontend looks like:

.then(response => {
            this.amazonItems = response.data;
            console.log(this.amazonItems[0]);

Query of MongoDB:

var result = collection.Find(filter).Sort(sort).ToList().ToJson();

Serialization:

List<string> returnResult = new List<string>();
returnResult.Add(_sm.SearchAmazonQuery(searchQuery, _db));
response.Content = new StringContent(JsonConvert.SerializeObject(returnResult), System.Text.Encoding.UTF8, "application/json");
response.StatusCode = HttpStatusCode.OK;
return response;

Console output: console

Please show screenshots of your console, copying its output as text isn't always clear. Also, how are you creating the request? — Phil
– Phil, Commented May 13, 2019 at 4:51
From your comment below, what is returnResult? I suspect it's a list / array / collection / whatever of already JSON-encoded strings which would be why you're getting this double-encoded response — Phil
– Phil, Commented May 13, 2019 at 5:08

Syed mohamed aladeen · Accepted Answer · 2019-05-13 04:53:14Z

1

Try parsing, I think it is in stringify mode.

.then(response => {
    this.amazonItems = response.data;
    console.log(JSON.parse(this.amazonItems[0]));

edited May 13, 2019 at 4:53

answered May 13, 2019 at 4:50

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

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

2 Comments

Phil Over a year ago

FYI, it's JSON.parse (lowercase "p"). Also, I suspect OP's response is double JSON encoded, otherwise amazonItems[0] wouldn't work

Bryan Over a year ago

I forgot to add, I serialize the list on the backend to JSON, so parsing wont work. response.Content = new StringContent(JsonConvert.SerializeObject(returnResult), System.Text.Encoding.UTF8, "application/json");

neaumusic · Accepted Answer · 2019-05-13 04:52:17Z

0

It looks like it’s stringified, try JSON.parse(results[0]), also that’s some weird syntax ObjectId(‘asdajdjsja’)

answered May 13, 2019 at 4:52

neaumusic

10.5k11 gold badges61 silver badges88 bronze badges

2 Comments

Phil Over a year ago

ObjectId indicates the response is a MongoDB doc entry

Bryan Over a year ago

Correct, its coming from Mongo.

Phil · Accepted Answer · 2019-05-13 05:22:36Z

0

I don't really know much about your server-side code (guessing C#) but, assuming

_sm.SearchAmazonQuery(searchQuery, _db)

returns the result of

var result = collection.Find(filter).Sort(sort).ToList().ToJson();

which appears to already be a JSON string, I suspect you just want

response.Content = new StringContent(_sm.SearchAmazonQuery(searchQuery, _db), 
        System.Text.Encoding.UTF8, "application/json");

This means your response.data will be an array of objects, not an array of JSON strings.

.then(response => {
  this.amazonItems = response.data
  console.log(this.amazonItems[0])
    // 👉 {_id: "5cbcd80e0c5c9f1dfc8bf2f3", price: "$1,399.00", ...
})

answered May 13, 2019 at 5:22

Phil

166k25 gold badges265 silver badges269 bronze badges

4 Comments

Bryan Over a year ago

You are correct in your assumptions. I tried your fix, the result of console.log(amazonItems) is now just the same as the result from the image. Doing console.log(amazonItems[0] results in a single ' [ ' and amazonItems.name is results in undefined.

Phil Over a year ago

That's odd as Axios should be decoding the response as JSON automatically

Bryan Over a year ago

Not sure what else to do. Wouldn't be so bad if I could access the elements.

Phil Over a year ago

We'll need to see exactly what the response is. Use your browser's Network console. Check the response headers and please show exactly what the response body looks like

Collectives™ on Stack Overflow

Accessing JSON elements of an array of JSON objects

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related